React reload a page on the route change

In this article, we will explore how to reload a page on the route change in React. This is a very common requirement when building the dynamic web pages using reactjs.

React router allows us to define routes and map those routes to specific components in your application. When a user navigates to a route, React Router renders the corresponding component.

How to reload the page on route change?

To reload the page on the route change, we can use the useEffect() hook to detect when the route changes and then use the window.location.reload() method to reload the page.

Following is an example:

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

function ReloadOnRouteChange() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen(() => {
      window.location.reload();
    });
    return () => {
      unlisten();
    };
  }, [history]);

  return (
    <div>
      <p>Reload the page when the route changes.</p>
    </div>
  );
}

export default ReloadOnRouteChange;

In the above example, we have defined a functional component called ReloadOnRouteChange that uses the useHistory() hook from React Router to get access to the history object. We then use the useEffect() hook to listen for changes to the history object and reload the page when the route changes.

When the history object changes, we call window.location.reload() to reload the page. In the cleanup of useEffect hook, we use unlisten() to remove the event listener when the component unmounts.