React Router v6中如何将默认路径'/'重定向至'/home'？当前配置无效

问题原因 #

你的路由配置存在两个核心问题：

1. 父路由路径配置错误：父路由path: ''属于"模糊前缀匹配"，会匹配所有路径的起始部分，但React Router中，子路由的绝对路径（如path: '/'）会完全忽略父路由的路径规则，导致根路径/的匹配逻辑混乱。
2. 子路由重定向的路径写法错误：子路由里写path: '/'是绝对路径，和父路由的空路径组合后，匹配逻辑冲突，无法触发预期的重定向，最终错误回退组件被触发。

修复后的路由配置 #

调整父路由路径为/，并将根重定向改为index路由（嵌套路由中，index路由用于父路由匹配但无具体子路由匹配时的默认渲染内容）：

const publicRoutes = [
  {
    path: '/', // 改为根路径作为父路由容器
    element: <Default/>,
    children: [
      { index: true, element: <Navigate to='/home' /> }, // 使用index路由处理根路径重定向
      ...otherRoutes // 这里的子路由路径建议用相对路径，比如{ path: 'home', element: <Home/> }
    ],
  },
];

额外说明 #

• 如果otherRoutes里的路由是绝对路径（比如path: '/home'），建议改成相对路径path: 'home'，这样会自动继承父路由的/路径，形成/home的完整路径，符合嵌套路由的设计逻辑。
• 父路由设为/后，所有子路由都会在Default组件的<Outlet />中渲染，既保证Default在所有页面都显示，同时根路径/会触发index路由的重定向跳转到/home。

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