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

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

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.

Answer 3

以下是 react-router-dom 团队在 v6 中删除该 API 时就重定向问题所说的话： https:\/\/github.com\/remix-run\/react-router\/blob\/main\/docs\/upgrading\/reach。 md#redirect-redirectto-isredirect<\/a>

"

Answer 4

Redirecting in react-router-dom v6 is done with the <Navigate> Component with replace props.

Step 1:

import { Navigate } from 'react-router-dom';

Step 2:

<Routes>
    <Route path='/' element={<Navigate replace to='/search' />} />
</Routes>

Answer 5

In v6.2.* Just add a Route with path to *

<Routes>
  <Route path="/" element={<App />}>
    <Route path="expenses" element={<Expenses />} />
   
    <Route
      path="*"
      element={
        <main style={{ padding: "1rem" }}>
          <p>There's nothing here!</p>
        </main>
      }
    />
  </Route>
</Routes>

Official Doc