React Router索引路由未默认显示的原因及解决方法

问题原因 #

你代码里的索引路由同时设置了index和path='home'，这违反了React Router的规则：索引路由不能拥有path属性。

索引路由的设计目的是，当父路由路径（此处为/）被匹配时，作为默认内容渲染到父路由的Outlet中，它不需要自己的路径。添加path='home'后，这条路由变成了普通子路由，只有访问/home时才会渲染，默认访问/时不会触发，所以Outlet区域没有内容，只显示了Heading组件。

修复方案 #

有两种常见的修复方式，根据你的需求选择：

方案一：直接设置默认索引路由 #

去掉索引路由的path属性，让它成为父路由/的默认渲染内容：

import { Routes, Route, Outlet } from 'react-router-dom';
import Home from './routes/home/home.component.jsx'
import Heading from './components/Heading';

function Header () {
  return (
    <>
      <Heading />
      <Outlet />
    </>
  )
}

function App() {
  return (
    <Routes>
      <Route path='/' element={<Header />} >
        {/* 移除path属性，仅保留index */}
        <Route index element={<Home />} />
      </Route>
    </Routes>
  );
}

export default App;

修改后，访问/时会自动渲染Home组件到Outlet中。

方案二：默认重定向到/home路径 #

如果希望Home组件在/home路径下展示，同时默认访问/时跳转到/home，需要添加重定向路由：

// 先导入Navigate组件
import { Routes, Route, Outlet, Navigate } from 'react-router-dom';
import Home from './routes/home/home.component.jsx'
import Heading from './components/Heading';

function Header () {
  return (
    <>
      <Heading />
      <Outlet />
    </>
  )
}

function App() {
  return (
    <Routes>
      <Route path='/' element={<Header />} >
        <Route path='home' element={<Home />} />
        {/* 索引路由设置为重定向到/home */}
        <Route index element={<Navigate to="/home" />} />
      </Route>
    </Routes>
  );
}

export default App;

修改后，打开页面会自动跳转到/home，同时渲染Home组件。

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