如何在 React Router v6 中重定向？

javascript reactjs react-router react-router-dom

2022-08-30 05:35:54

我正在尝试升级到 React Router v6 （）。react-router-dom 6.0.1

这是我更新的代码：

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route render={() => <Navigate to="/" />} />
  </Routes>
</BrowserRouter>

最后一种方法是将其余路径重定向到。Route/

但是，我遇到了一个错误

TS2322： Type '{ render：（） => Element; }' 不可分配给类型 'IntrinsicAttributes & （PathRouteProps |LayoutRouteProps |IndexRouteProps）'.属性“render”在类型“IntrinsicAttributes &（PathRouteProps |上不存在LayoutRouteProps |IndexRouteProps）'.

但是，根据文档，它确实具有 .如何正确使用它？renderRoute

答案 1

我认为您应该使用无匹配路由方法。

请在文档中查看此信息。

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

更新 - 18/03/2022

为了保持历史的清洁，你应该设置道具。这将避免在用户单击后退后进行额外的重定向。感谢@Paul的这个提示。replace

答案 2

我找到了另一种方法来做到这一点：

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

https://reactrouter.com/docs/en/v6/getting-started/overview#navigation