React-router-dom v6.0.0 中的重定向替代方案是什么？

Question

React-Router-DOM的新版本（v6.0.0）不再支持“Redirect”。它的替代方案是什么？

- Ali Nematollahi

Answer 1

单独重定向通过指定Navigate组件中的replace prop来完成。

<Navigate replace to="/" />

如果您想要复制 RRDv5 的 Redirect 组件从一个路径重定向，那么您需要与 Route 结合使用。

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

• 导航
• 路线
• 路线

- Drew Reese

Answer 2

如果您没有对应用程序进行服务器渲染，您仍然可以在客户端的初始渲染时执行重定向操作，如下所示：

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>
      );
    }

在上面的例子中，当有人访问 / 时，他们将自动重定向到 /home，与以前相同。

请注意，当服务器渲染时，这种方式不起作用，因为导航发生在 React.useEffect() 中。

查看React Router v6中的重定向以了解更多详细信息。

- zerocewl

Answer 3

在 react-router-dom v6 中，重定向是通过使用带有 replace 属性的 <Navigate> 组件来完成的。 步骤1：

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

步骤2：

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

- Haroon Hayat

Answer 4

在v6中，react-router-dom团队删除了重定向API，这是他们对此事的说法：https://github.com/remix-run/react-router/blob/main/docs/upgrading/reach.md#redirect-redirectto-isredirect

- user17364288

Answer 5

如果你希望应用程序在你在地址栏中输入不存在的乱码时将你重定向到“主页”，请尝试指定 path="*" 参数。 } />

- Nikolay Volynkin

Answer 6

在 v6.2.* 版本中，只需添加一个路径为 * 的路由即可。

<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>

官方文档

- Mbanda