React Router Dom v6 - 重定向到另一个路由
Posted
技术标签:
【中文标题】React Router Dom v6 - 重定向到另一个路由【英文标题】:React Router Dom v6 - redirecting to another route 【发布时间】:2022-01-21 03:32:01 【问题描述】:我正在使用以下路由器配置:
<Routes>
<Route path="/" element=<Home /> />
<Route path="/information" element=<Information /> />
<Route path="*">
<Navigate to="/" replace=true />
</Route>
</Routes>
每次输入路由器无法识别的路由时,我都想导航到主路由和主组件。从 v6 开始,没有 Redirect 组件,所以我尝试使用 Navigate。
为什么我的配置不起作用?
【问题讨论】:
【参考方案1】:复制Redirect
的新语法/模式是将Navigate
渲染为路由element
,并指定replace
属性。
RRDv5:<Redirect from="*" to="/" />
RRDv6:<Route path="*" element=<Navigate to="/" replace /> />
【讨论】:
这正是我想要的。第一个答案是导航但不更改网址。谢谢德鲁【参考方案2】:这是他们文档中的示例
<Routes>
<Route path="/" element=<Layout />>
<Route index element=<Home /> />
<Route path="about" element=<About /> />
<Route path="dashboard" element=<Dashboard /> />
/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */
<Route path="*" element=<NoMatch /> />
</Route>
</Routes>
我认为你需要将你的全部捕获标志“*”放在你的根路由下
<Routes>
<Route path="/" element=<Home />>
<Route path="*" element=<Home /> />
</Route>
<Route path="/information" element=<Information /> />
</Routes>
【讨论】:
以上是关于React Router Dom v6 - 重定向到另一个路由的主要内容,如果未能解决你的问题,请参考以下文章
React Router Dom v6 - 重定向到另一个路由
反应:'重定向'不是从'react-router-dom'导出的