React-Router v6设置默认路由

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