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

Question

新版本的react-router-dom（v6.0.0）不识别“重定向”。有什么替代方案吗？

Answer 1

单独重定向是通过指定了 propNavigate的组件完成的replace。

<Navigate replace to="/" />

如果您想从Redirect路径复制 RRDv5 的组件重定向，那么您需要与.Route

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

• 导航
• 路线
• 路线

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 中的重定向以获取更深入的细节。