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

Posted 2023-02-22

【中文标题】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：<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>