react-router-dom v 6.0.0 中重定向的替代方法是什么？答案

【问题标题】：What is the alternative for Redirect in react-router-dom v 6.0.0?react-router-dom v 6.0.0 中重定向的替代方法是什么？
【发布时间】：2021-12-25 21:49:56
【问题描述】：

新版本的 react-router-dom (v6.0.0) 不识别“重定向”。它的替代品是什么？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

单独的重定向是通过 Navigate 组件完成的，并指定了 replace 属性。

<Navigate replace to="/" />

如果你想复制重定向来自一个路径，那么你需要结合Route。

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

【讨论】：

我认为酸灼伤，但我应该再看一遍。谢谢提醒 ;-)
@zerocewl 不错。我已经很久没有看了。经典。

【解决方案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() 中。

查看Redirects in React Router v6 了解更深入的细节。

【讨论】：

【解决方案3】：

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

【讨论】：