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

Question

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

<Routes>
<Route path="/" element={<Home />} />
<Route path="/information" element={<Information />} />
<Route path="*">
<Navigate to="/" replace={true} />
</Route>
</Routes>

每次键入路由器无法识别的路由时，我都希望导航到主路由和主组件。自从v6以来，没有重定向组件，所以我尝试使用Navigate。

为什么我的配置不起作用

Answer 1

复制Redirect的新语法/模式是将Navigate呈现为路由element，并指定replace道具。

RRDv5:<Redirect from="*" to="/" />

RRDv6:<Route path="*" element={<Navigate to="/" replace />} />

Answer 2

但如果您以与react router v5中的组件相同的方式使用上面的代码示例，则会导致无限循环(在这种情况下，它实际上工作得很好(

<Redirect from="/foo" to="/foo/bar" />

像这样：

<Route path="/foo" element={<Navigate replace to="/foo/bar" />} />

如果路线/foo不存在-该路线没有页面

我还不知道该怎么处理。