How to detect route changes with react-router v4?

Question

I need to detect if a route change has occurred so that I can change a variable to true.

I've looked through these questions:
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

None of them have worked for me. Is there a clear way to call a function when a route change occurs.

Answer 1

One way is to use the withRouter higher-order component.

Live demo (click the hyperlinks to change routes and view the results in the displayed console)

You can get access to the history object's properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

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}/>);

---

Another example that uses url params:

If you were changing profile routes from /profile/20 to /profile/32

And your route was defined as /profile/:userId

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

Answer 2

With React Hooks, it should be as simple as:

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

By passing location.pathname in the second array argument, means you are saying to useEffect to only re-run if location.pathname changes.

Live example with code source: https://codesandbox.io/s/detect-route-path-changes-with-react-hooks-dt16i

Answer 3

React Router v5 now detects the route changes automatically thanks to hooks. Here's the example from the team behind it:

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>
}

This example sends a "page view" to Google Analytics (ga) every time the URL changes.

Answer 4

When component is specified as <Route>'s component property, React Router 4 (RR4) passes to it few additional properties: match, location and history.

Then u should use componentDidUpdate lifecycle method to compare location objects before and after update (remember ES object comparison rules). Since location objects are immutable, they will never match. Even if u navigate to the same location.

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

withRouter should be used when you need to access these properties within an arbitrary component that is not specified as a component property of any Route. Make sure to wrap your app in <BrowserRouter> since it provides all the necessary API, otherwise these methods will only work in components contained within <BrowserRouter>.

There are cases when user decides to reload the page via navigation buttons instead of dedicated interface in browsers. But comparisons like this:

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

will make it impossible.

Answer 5

How about tracking the length of the history object in your application state? The history object provided by react-router increases in length each time a new route is traversed. See image below.

ComponentDidMount and ComponentWillUnMount check:

Answer 6

React use Component-Based Architecture. So, why don't we obey this rule?

You can see DEMO.

Each page must be wrapped by an HOC, this will detect changing of page automatically.

Home

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 />;
    }
  };