React-Router v6设置默认路由

最新推荐文章于 2024-07-30 11:42:46 发布

stpzhf

最新推荐文章于 2024-07-30 11:42:46 发布

阅读量998

点赞数 9

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/stpzhf/article/details/135073954

版权

本文介绍了ReactRouter中的两种路由模式：索引路由在根路径匹配时生效，而当没有其他路由匹配时，会自动重定向到指定的‘默认’路由。例子展示了如何使用`<Route>`和`<Navigato>`o进行路径配置和重定向。

摘要由CSDN通过智能技术生成

参考连接: 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>