0

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.

YakovL
  • 7,557
  • 12
  • 62
  • 102
Diego
  • 594
  • 2
  • 10
  • 29
  • The post I linked is how you replicate a `Redirect` in RRDv6. What isn't working? You can't redirect from "/" to "/" as this will cause a render loop. – Drew Reese Jan 27 '22 at 19:37
  • @DrewReese I appreciate you pointing to that solution. Although that implementation isn't working for my use case. Unless I'm doing something wrong. – Diego Jan 27 '22 at 19:38
  • You can't redirect to the same path you are trying to redirect from. You also shouldn't have two routes rendering the same path. Can you more clearly describe what it is you are trying to accomplish? What is the condition in which you want to redirect from the "/dashboard" path to home "/" path? Just reloading the page? Some auth condition? – Drew Reese Jan 27 '22 at 19:40
  • Ideally just like i had in version <5.x when i hit the refresh icon in the browser, it would then refresh the app, bringing you back to the home page. Regardless of which route i was in. Does that make sense? – Diego Jan 27 '22 at 19:44
  • I suppose if you just want to redirect to "/" you could use a mounting `useEffect` hook and imperatively redirect to "/" using the `navigate` function from `useNavigate` hook when the `App` component mounts. Would this achieve the behavior you are looking for? – Drew Reese Jan 27 '22 at 19:44
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241465/discussion-between-diego-and-drew-reese). – Diego Jan 27 '22 at 19:44
  • The solution was to add const navigate = useNavigate(); useEffect(() => { navigate("/", { replace: true }); }, []); in my App.js thanks @DrewReese – Diego Jan 27 '22 at 19:55
  • Actually spoke too soon, it seems like the app is now in an infinite loop due that that change. – Diego Jan 27 '22 at 20:27
  • Think you could create a small *running* codesandbox demo that reproduces the issue that we could inspect and debug live? – Drew Reese Jan 27 '22 at 20:41
  • @DrewReese I ended up adding a little bit more to the example. I added const perfEntries = performance.getEntriesByType("navigation"); const p = perfEntries[0]; and to the useEffect() dependencies, i added p.type === 'reload', this seems to have done the trick – Diego Jan 27 '22 at 20:43

0 Answers0