Search code examples
reactjstypescripthttp-redirectnavigationreact-router-dom

React Router Dom v6 - redirecting to another route

I am using the following Router config:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/information" element={<Information />} />
  <Route path="*">
    <Navigate to="/" replace={true} />
  </Route>
</Routes>

I would like to navigate to home route and Home component every time when I type the route that is not recognized by the router. Since v6, there is no Redirect component, So I am trying to use Navigate.

Why my configuration is not working?

Solution

  • The new syntax/pattern to replicate the Redirect is to render the Navigate as the route element, and specify the replace prop.

    RRDv5: <Redirect from="*" to="/" />

    RRDv6: <Route path="*" element={<Navigate to="/" replace />} />