在react-router v6中配置索引路由：实现根路径重定向至/path1

你之前的写法存在两个核心问题：

• 索引路由不能同时设置path属性，index路由仅负责在父路由路径（即/）匹配时渲染默认子组件，不会修改当前URL路径
• 你需要的是URL从/跳转至/path1，而非在/路径下渲染OneComponent

下面给出两种适配不同场景的实现方案：

方案一：保留Home作为布局组件（推荐） #

如果Home是包含导航栏、Outlet等布局元素的父组件，只需在父路由内添加一个无path的index路由，通过Navigate组件触发路径跳转：

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

// 确保Home组件内渲染了Outlet，用于承载子路由内容
function Home() {
  return (
    <div>
      {/* 这里放置导航栏、侧边栏等布局内容 */}
      <Outlet />
    </div>
  );
}

<Routes>
  <Route path="/" element={<Home />}>
    <Route path="path1" element={<OneComponent />} />
    <Route path="path2" element={<TwoComponent />} />
    <Route path="path3" element={<ThreeComponent />} />
    {/* 根路径匹配时自动跳转到/path1 */}
    <Route index element={<Navigate to="/path1" replace />} />
  </Route>
</Routes>

访问/时，URL会立即切换为/path1，同时Home布局保留，OneComponent在Outlet中渲染。replace属性可避免用户点击后退按钮回到无效的/路径。

方案二：直接根路由重定向（无需Home布局） #

如果不需要Home作为父组件，直接将根路由的element设置为Navigate组件即可：

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

<Routes>
  <Route path="/" element={<Navigate to="/path1" replace />} />
  <Route path="/path1" element={<OneComponent />} />
  <Route path="/path2" element={<TwoComponent />} />
  <Route path="/path3" element={<ThreeComponent />} />
</Routes>

核心说明 #

• 索引路由（index属性）的作用是提供父路由匹配时的默认子组件，不会改变URL路径，这是你之前写法无法实现跳转的根本原因
• Navigate是React Router中实现路由跳转的标准组件，replace属性会替换历史记录中的当前条目，避免产生冗余的/路径历史

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