import React, { useEffect } from 'react';
import { useLocation } from 'react-router';

function MyApp() {

  const location = useLocation();

  useEffect(() => {
      console.log('route has been changed');
      ...your code
  },[location.pathname]);

}

用钩子

您应该使用history v4 lib。

这里的例子

history.listen((location, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
  console.log(`The last navigation action was ${action}`)
})

v5.1引入了有用的钩子useLocation

https://reacttraining.com/blog/react-router-v5-1/#uselocation

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

function usePageViews() {
  let location = useLocation()

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

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

要在上面的基础上展开，您需要获取history对象。如果您正在使用BrowserRouter，您可以导入withRouter并使用高阶组件(HoC)包装您的组件，以便通过道具访问历史对象的属性和函数。

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

    const myComponent = ({ history }) => {

        history.listen((location, action) => {
            // location is an object like window.location
            console.log(action, location.pathname, location.state)
        });

        return <div>...</div>;
    };

    export default withRouter(myComponent);

唯一需要注意的是，使用throuter和大多数其他访问历史的方法似乎会污染道具，因为它们将对象解构到其中。

正如其他人所说，这已经被react路由器暴露的钩子所取代，并且它有内存泄漏。如果你在一个函数组件中注册监听器，你应该通过useEffect来做，然后在函数的返回中取消注册。

withRouter,历史。listen，和useEffect (React Hooks)一起工作得很好:

import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'

const Component = ({ history }) => {
    useEffect(() => history.listen(() => {
        // do something on route change
        // for my example, close a drawer
    }), [])

    //...
}

export default withRouter(Component)

侦听器回调将在路由更改时触发，并返回历史记录。listen是一个关闭处理程序，可以很好地与useEffect一起使用。

在某些情况下，你可能会使用render attribute而不是component，如下所示:

class App extends React.Component {

    constructor (props) {
        super(props);
    }

    onRouteChange (pageId) {
        console.log(pageId);
    }

    render () {
        return  <Switch>
                    <Route path="/" exact render={(props) => { 
                        this.onRouteChange('home');
                        return <HomePage {...props} />;
                    }} />
                    <Route path="/checkout" exact render={(props) => { 
                        this.onRouteChange('checkout');
                        return <CheckoutPage {...props} />;
                    }} />
                </Switch>
    }
}

注意，如果你在onRouteChange方法中改变状态，这可能会导致“最大更新深度超出”错误。