如何使用 react-router v4 检测路由变化？

Question

我需要检测是否发生路由更改，以便将变量更改为 true。

我浏览了这些问题：
1.https://github.com/ReactTraining/react-router/issues/3554
2.How to listen to route changes in react router v4?
3.Detect Route Change with react-router

没有一个对我有用。发生路由变化时是否有明确的方法来调用函数。

Answer 1

一种方法是使用withRouter 高阶组件。

Live demo（点击超链接更改路线并在显示的控制台中查看结果）

您可以通过 withRouter 高阶组件访问历史对象的属性和最接近的匹配项。 withRouter 将在渲染时将更新的匹配、位置和历史道具传递给包装的组件。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

import {withRouter} from 'react-router-dom';

class App extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            console.log('Route change!');
        }
    }
    render() {
        return (
            <div className="App">
                ...routes
            </div>
        );
    }
}

export default withRouter(props => <App {...props}/>);

---

另一个使用 url 参数的例子：

如果您将个人资料路由从 /profile/20 更改为 /profile/32

你的路线被定义为/profile/:userId

componentDidUpdate(prevProps) {
    if (this.props.match.params.userId !== prevProps.match.params.userId) {
        console.log('Route change!');
    }
}

Answer 2

如何跟踪应用程序状态中历史对象的长度？每次遍历新路由时，react-router 提供的历史对象的长度都会增加。见下图。

ComponentDidMount 和 ComponentWillUnMount 检查：

Answer 3

React 使用基于组件的架构。那么，我们为什么不遵守这条规则呢？

你可以看到DEMO。

每个页面都必须由 HOC 包装，这将自动检测页面的变化。

首页

import React from "react";
import { NavLink } from "react-router-dom";
import withBase from "./withBase";

const Home = () => (
  <div>
    <p>Welcome Home!!!</p>
    <NavLink to="/login">Go to login page</NavLink>
  </div>
);

export default withBase(Home);

withBase HOC

import React from "react";

export default WrappedComponent =>
  class extends React.Component {
    componentDidMount() {
      this.props.handleChangePage();
    }

    render() {
      return <WrappedComponent />;
    }
  };

Answer 4

当组件被指定为<Route> 的component 属性时，React Router 4 (RR4) 会向它传递一些附加属性：match、location 和history。

那么你应该使用componentDidUpdate生命周期方法来比较更新前后的location对象（记住ES对象比较规则）。由于位置对象是不可变的，它们永远不会匹配。即使你导航到同一个位置。

  componentDidUpdate(newProps) {
    if (this.props.location !== newProps.location) {
      this.handleNavigation();
    }
  }

withRouter 应该在您需要访问未指定为任何路由的component 属性的任意组件中的这些属性时使用。确保将您的应用包装在 <BrowserRouter> 中，因为它提供了所有必要的 API，否则这些方法将仅适用于 <BrowserRouter> 中包含的组件。

在某些情况下，用户决定通过导航按钮而不是浏览器中的专用界面重新加载页面。但是这样的比较：

this.props.location.pathname !== prevProps.location.pathname

会让它变得不可能。

Answer 5

使用 React Hooks，它应该很简单：

useEffect(() => {
    const { pathname } = location;
    console.log('New path:', pathname);
}, [location.pathname]);

通过在第二个数组参数中传递location.pathname，意味着您要使用useEffect 仅在location.pathname 更改时重新运行。

带有代码源的实时示例：https://codesandbox.io/s/detect-route-path-changes-with-react-hooks-dt16i

Answer 6

React Router v5 现在通过钩子自动检测路由更改。后面是the example from the team：

import { Switch, useLocation } from 'react-router'

function usePageViews() {
  let location = useLocation()

  useEffect(
    () => {
      ga.send(['pageview', location.pathname])
    },
    [location]
  )
}

function App() {
  usePageViews()
  return <Switch>{/* your routes here */}</Switch>
}

此示例会在每次 URL 更改时向 Google Analytics (ga) 发送“页面浏览量”。