React Router v6如何实现嵌套路由默认重定向到指定路径

不需要使用useEffect做组件渲染后的手动跳转，直接使用React Router v6 内置的索引路由+导航组件即可，属于路由层面的匹配规则，无额外渲染开销，性能更好。

针对你当前在子组件内定义子路由的写法 #

你现有父路由配置无需修改：

<Route path="/settings/*" element={<AccountSettings />}>

在定义子路由的位置，新增一条index索引路由（当父路由/settings被精确匹配、没有后续子路径时会命中该路由），使用Navigate组件完成重定向即可，完整子路由配置参考：

<Routes>
  {/* 匹配/settings路径时直接跳转 */}
  <Route index element={<Navigate to="profile" replace />} />
  <Route path="security" element={<Example />} />
  <Route path="profile" element={<YourProfileComponent />} />
  {/* 其余原有settings下的子路由保持不变 */}
</Routes>

配置说明 #

• index属性标记该路由为父路由的默认索引路由，不需要写path属性
• to="profile"是相对路径写法，会自动基于当前父路由/settings拼接为最终跳转路径/settings/profile
• replace属性会替换当前浏览器历史记录，避免用户点击返回按钮时回到/settings路径再次触发重定向，交互更流畅

更推荐的统一路由配置写法 #

如果后续调整为所有路由集中在顶层配置，不需要在子组件中单独写Routes，可以直接把索引路由嵌套在父路由内部，父路由路径也不需要加/*后缀，React Router会自动处理嵌套匹配：

<Route path="/settings" element={<AccountSettings />}>
  <Route index element={<Navigate to="profile" replace />} />
  <Route path="security" element={<Example />} />
  <Route path="profile" element={<YourProfileComponent />} />
</Route>

两种写法效果完全一致，都不会出现先渲染页面再跳转的白屏/闪烁问题，比useEffect的实现效率高很多。

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