React Router Dom v6 - 重定向到另一个路由

Posted

技术标签:

【中文标题】React Router Dom v6 - 重定向到另一个路由【英文标题】:React Router Dom v6 - redirecting to another route 【发布时间】:2021-12-30 11:10:09 【问题描述】:

我正在使用以下路由器配置:

<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:&lt;Redirect from="*" to="/" /&gt;

RRDv6:&lt;Route path="*" element=&lt;Navigate to="/" replace /&gt; /&gt;

【讨论】:

这正是我想要的。第一个答案是导航但不更改网址。谢谢德鲁【参考方案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 v6 保护路由

react-router-dom V6

反应:'重定向'不是从'react-router-dom'导出的

React redirect - react-router-dom 上的重定向组件

在 react-router-dom 中重定向?