问题

On pressing back button of browser the useEffect doesn't fire although the location is being changed. Redirecting url using window.open() doesn't fire a change in this useEffect once I press back button and return to page from where I was redirected.

const location = useLocation();

useEffect(() => {
  // something that needs to run when there is a change in url

}, [location.pathname])

window.open(someUrl,"_self");

Things happening after window.open

1. I am using SAML method to authenticate hence it redirects to a 3rd party server on logout
2. Multiple redirects happen once 3rd party receives the logout request
3. Once the logout is successful, I am redirected to my site from the server.

const location = useLocation();

useEffect(() => {
  // something that needs to run when there is a change in url

}, [location.pathname])

window.open(someUrl,"_self");

答案1

得分: 2

useLocation钩子返回一个Location对象，具有以下接口：

export interface Path {
  pathname: string;
  search: string;
  hash: string;
}

export interface Location extends Path {
  state: any;
  key: string;
}

没有path属性。useEffect钩子应该使用location.pathname作为依赖项。

const location = useLocation();

useEffect(() => {
  // 需要在URL路径变化时运行的一些操作
}, [location.pathname]);

或者

const { pathname } = useLocation();

useEffect(() => {
  // 需要在URL路径变化时运行的一些操作
}, [pathname]);

演示

<details>
<summary>英文:</summary>

The `useLocation` hook returns a `Location` object with the following interface ([source][1]):

```typescript
export interface Path {
  pathname: string;
  search: string;
  hash: string;
}

export interface Location extends Path {
  state: any;
  key: string;
}

There is no path property. The useEffect hook should use location.pathname as the dependency.

const location = useLocation();

useEffect(() => {
  // something that needs to run when there is a change in url path
}, [location.pathname]);

or

const { pathname } = useLocation();

useEffect(() => {
  // something that needs to run when there is a change in url path
}, [pathname]);

Demo