React-Router v6设置默认路由

2023-12-19 05:35:18

参考连接: https://www.soinside.com/question/rH6pzCBpqbVnntVKTnQ4oY

方式1

代码如下（示例）：

关键字 index

<Routes>
  <Route path="/">
    <Route index element={<ComponentA />} />
    <Route path="pathA" element={<ComponentA />} />
    <Route path="pathB" element={<ComponentB />} />
    <Route path="pathC" element={<ComponentC />} />
  </Route>
</Routes>

或者
<Routes>
  <Route path="/">
    <Route index element={<Navigate to="/pathA" replace />} />
    <Route path="pathA" element={<ComponentA />} />
    <Route path="pathB" element={<ComponentB />} />
    <Route path="pathC" element={<ComponentC />} />
  </Route>
</Routes>

索引路由是当路径完全匹配根父路由的路径时将被匹配和渲染的路由。

方式2

代码如下（示例）：

如果没有其他路由匹配，则重定向到“默认”路由：
您还可以将重定向渲染到您认为是“默认”路线的路线。
<Routes>
  <Route path="/pathA" element={<ComponentA />} />
  <Route path="/pathB" element={<ComponentB />} />
  <Route path="/pathC" element={<ComponentC />} />
  <Route path="*" element={<Navigate to="/pathA" replace />} />
</Routes>

文章来源:https://blog.csdn.net/stpzhf/article/details/135073954
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。