How to redirect a page to menu on reload or refresh page with react?

Question

I want to redirect a user to the menu page when he reload or refersh the current page.

Menu.js:

import React from "react";
import { useHistory } from "react-router-dom";

export default function Menu() {
  const history = useHistory();
  const handleClick = () => {
    history.push("/myComponent");
  };
  return (
    <div>
      <h1>Menu Page</h1>
      <button onClick={handleClick}>Go to MyComponent</button>
    </div>
  );
}

MyComponent.js:

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

export default function MyComponent() {
  const history = useHistory();
  const handler = function () {
    history.push("/");
  };
  useEffect(() => {
    window.addEventListener("beforeunload", handler);
    return () => {
      window.removeEventListener("beforeunload", handler);
    };
  }, []);
  return (
    <div>
      <h1>My Component Page</h1>
    </div>
  );
}

App.js:

import { Router, Route } from "react-router-dom";
import Menu from "./Menu";
import MyComponent from "./MyComponent";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Route exact path="/" component={Menu} />
      <Route exact path="/myComponent" component={MyComponent} />
    </Router>
  );
}

When I'm on MyComponent page and I reload the page the path url changed to '/' but the page displayes the content of MyComponent. I want to be redirected only to Menu only when I refresh the page or reload it by click on reload page button on the browser. How can I fix that?

Answer 1

To fix this issue I created a new route RefreshRoute :

import React, {useCallback, useEffect} from 'react';
import {Redirect, Route} from 'react-router-dom';



const RefreshRoute = ({
  component: Component,
  redirectionPath,
  ...rest
}: Props) => {
  redirectionPath = redirectionPath ?? '/';
  const perf = performance.getEntriesByType('navigation')[0].toJSON();
  const reloadType = perf.type !== 'reload';

  const handler = useCallback((e) => {
    e.preventDefault();
    e.returnValue = '';
    return true;
  }, []);

  useEffect(() => {
    window.onbeforeunload = handler;

    return () => {
      window.onbeforeunload = handler;
    };
  });
  return (
    <>
      {reloadType ? (
        <Route component={Component} {...rest} />
      ) : (
        <Redirect to={redirectionPath} />
      )}
    </>
  );
};
export default RefreshRoute;

App.js:

import { Router, Route } from "react-router-dom";
import Menu from "./Menu";
import MyComponent from "./MyComponent";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Route exact path="/" component={Menu} />
      <RefreshRoute path='/myComponent' redirectionPath='/' />
    </Router>
  );
}