React Router 6中如何将根路径/重定向至子路径？

你当前配置的问题在于，根路由path='/'是非精确匹配（React Router v6 默认行为），所有路径（包括/module/submodule）都会匹配这个路由，导致每次访问目标路径时，都会触发Navigate组件，进而无限循环。

方案一：使用 Index 路由（推荐） #

在根路由下添加index路由，仅当访问精确的/时才触发重定向，同时根路由用Outlet作为容器承载子路由：

import { Route, Outlet, Navigate } from 'react-router-dom';

// ...
<Route path='/' element={<Outlet />}>
  {/* 仅匹配精确根路径 / 时重定向 */}
  <Route index element={<Navigate replace to='/module/submodule' />} />
  
  {/* 原有模块路由 */}
  <Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
    <Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
  </Route>
</Route>
// ...

方案二：独立根路径重定向路由 #

将根路径重定向作为单独的路由，利用 React Router v6 的路由匹配优先级（从上到下），确保精确匹配/后不再匹配后续路由：

import { Route, Outlet, Navigate } from 'react-router-dom';

// ...
{/* 优先匹配精确根路径 */}
<Route path='/' element={<Navigate replace to='/module/submodule' />} />

{/* 承载所有其他路由 */}
<Route path='/*' element={<Outlet />}>
  <Route element={<Module />} handle={{ crumb: (): string => 'Module' }} path='module'>
    <Route element={<Submodule />} handle={{ crumb: (): string => 'Submodule' }} path='submodule' />
  </Route>
</Route>
// ...

方案说明 #

• 方案一中，index路由仅在父路由（/）匹配且没有子路由路径匹配时才会渲染，也就是只有访问精确的/时才会触发重定向，不会影响子路由的正常访问。
• 方案二中，path='/'的路由会优先匹配精确的根路径，跳转后匹配/module/submodule，此时会命中后续的path='/*'路由，不会再次触发根路径的重定向。

内容的提问来源于stack exchange，提问作者helion3