React Router v6嵌套路由：如何让父路径默认指向子路由/home？

在React Router v6里解决父路径默认渲染Outlet内容的问题，有两种实用方案：

方案1：使用index路由（推荐） #

给嵌套路由添加一个带index属性的路由项，它会成为父路由的默认子路由。当访问父路径（比如/dashboard）时，Outlet会自动渲染这个index路由的组件，URL保持不变。

代码示例：

<Route path="dashboard" element={<Dashboard />}>
  {/* index路由：匹配/dashboard时默认渲染Home */}
  <Route index element={<Home />} />
  <Route path="home" element={<Home />} />        
  <Route path="users" element={<Users />} />        
</Route>

如果不想重复声明<Home />，也可以调整路由结构让index路由直接复用逻辑，不过上面的写法已经足够清晰。

方案2：使用Navigate组件重定向 #

如果需要强制URL跳转到/dashboard/home，可以添加一个空路径的路由，用Navigate组件实现重定向。

代码示例：

import { Navigate } from 'react-router-dom';

<Route path="dashboard" element={<Dashboard />}>
  {/* 访问/dashboard时自动跳转到/dashboard/home */}
  <Route path="" element={<Navigate to="home" replace />} />
  <Route path="home" element={<Home />} />        
  <Route path="users" element={<Users />} />        
</Route>

replace属性可以避免在浏览器历史记录中留下/dashboard的访问记录，减少用户回退时的困惑。

内容的提问来源于stack exchange，提问作者Wael Ben Mustapha