如何在 React Router v6 中重定向？答案

【问题标题】：How to redirect in React Router v6?如何在 React Router v6 中重定向？
【发布时间】：2021-12-20 10:28:03
【问题描述】：

我正在尝试升级到 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：类型 '{ 渲染：() => 元素； }' 不可分配给类型 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'。类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)”上不存在属性“render”。

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

【问题讨论】：

这看起来像是文档中的错误。请注意right in the section above that 他们如何弃用render 而支持children？但看起来你正在阅读的关于从 v5 升级到 v5.1 的部分，他们只在 v6 中删除了render。看起来像<Route element={<Navigate to="/" />} /> is the new style。
gist.github.com/mjackson/…
同样来自gist.github.com/mjackson/…：“当你最终升级到v6时，将<Route render={() => ...}>转换为<Route element={...}>就完成了。”
感谢@Bergi，我通过一些更新取得了成功：<Route path="*" element={<Navigate to="/" />} />，请随时发布作为答案！

标签： javascript reactjs react-router react-router-dom

【解决方案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="/" />}
    />
  </Routes>
</BrowserRouter>

【讨论】：

非常感谢兄弟。你的回答救了我。整整一周我一直在尝试在 RRD5 中找到 render prop 的确切语法替换，最后经过几天的研究，我找到了你的答案。非常感谢