'react-router-dom V6.2.x Redirect to "/" if page is refreshed manually

I realize that with react-router-dom v6.x.x we no longer have the <Redirect /> component as it was replaced with <Navigate />.

I have something like this for my routes: react-router-dom "^5.3.0"

  const defaultRender = () => {
    return <Redirect to="/"/>;
  };

  const renderRootPath = () => (
    <>
      <Route path="/" render={defaultRender} />
      <Route
        exact
        path="/"
        component={Request}
      />
      <Route
        exact
        path="/dashboard"
        component={Dashboard}
      />
    </>
  );

  return (
    <Router basename="/">
       <Route path="/" render={renderRootPath} />
    </Router>
  );
}

If I'm on /dashboard route and manually refresh the page, then I'm redirected to / route which is what I would expect.

I'm upgrading to the latest version and want to have the same behavior. This is my current implementation, but when I refresh the page it never gets redirected to /. Any suggestions?

react-router-dom "^6.2.1"

  return (
        <Routes>
          <Route
            exact
            path="/"
            element={<Navigate replace to="/" />} // <<< does not work
          />
          <Route
            exact
            element={<Request />}
          />
          <Route
            exact
            path="dashboard"
            element={<Dashboard />}
          />
        </Routes>
  );

I have tried the suggested solution here without success:

<Routes>
  <Route path="/" element={<Navigate replace to="/" />} />
  <Route exact path="/" element={<Request />} />
  <Route exact path="dashboard" element={<Dashboard />} />
</Routes>

If I'm on the /dashboard page and manually refresh the page, it should then redirect me to /, but it stays within /dashboard.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source