What is the alternative for Redirect in react-router-dom v 6.0.0?

Question

New version of react-router-dom (v6.0.0) doesn't identify "Redirect". What is the alternative for it?

Answer 1

Redirecting alone is done via the Navigate component with the replace prop specified.

<Navigate replace to="/" />

If you want to replicate RRDv5's Redirect component redirecting from a path then you need to combine with a Route.

<Route path="/somePath" element={<Navigate replace to="/" />} />

• Navigate
• Routes & Route

Answer 2

If you aren't server rendering your app you can still redirect on the initial render in the client like this:

import { Routes, Route, Navigate } from "react-router-dom";

    function App() {
      return (
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/" element={<Navigate replace to="/home" />} />
        </Routes>
      );
    }

In the above example, when someone visits /, they will automatically be redirected to /home, same as before.

Please note however that this won't work when server rendering because the navigation happens in a React.useEffect().

Have a look at Redirects in React Router v6 for some deeper details.