javascript - 如何在 React Router v6 中重定向？

Question

我正在尝试升级到 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; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.   Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

但是，基于 the doc , 它确实有 render对于 Route .如何正确使用？

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

更新 - 2022 年 3 月 18 日
为了保持历史干净，你应该设置 replace支柱。这将避免用户单击返回后的额外重定向。感谢@Paul 这个提示。