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

CodePudding user response：

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

<Navigate replace to="/" />

If you want to replicate redirecting from a path then you need to combine with a Route.

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

• Navigate
• Routes & Route

CodePudding user response：

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.

CodePudding user response：

Here is what the react-router-dom teams said on the matter of redirects when that removed that API in v6: https://github.com/remix-run/react-router/blob/main/docs/upgrading/reach.md#redirect-redirectto-isredirect