如何在React Router的Outlet中显示默认组件？

嘿，我来帮你搞定这个问题！你现在的情况是访问根路由 / 时，<Outlet/> 里是空的，想让它默认显示类似 <p>Home</p> 的内容对吧？React Router 提供了很直接的解决方案，这里给你两种常用的实现方式：

方法一：使用 index 路由（官方推荐） #

这是 React Router 专门为父路由默认内容设计的方案，只需要在根路由的子路由列表里添加一个不带 path 的 index 路由即可：

修改你的 index.js 代码：

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App/>}>
          {/* 添加这一行 index 路由，作为根路由的默认内容 */}
          <Route index element={<p>Home</p>}/> 
          <Route path="page1" element={<Page1/>}/>
          <Route path='page2' element={<Page2/>}/>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

如果之后想把默认内容抽成独立组件（比如 <Home/>），直接把 element 值换成 <Home/> 就可以，灵活性拉满。

方法二：在 App 组件中判断路由 #

如果不想额外添加路由配置，也可以在 App 组件里通过 useLocation 钩子判断当前路径，手动渲染默认内容：

首先需要导入 useLocation：

import { Outlet, Link, useLocation } from 'react-router-dom';

然后修改 App 组件：

function App() {
  const location = useLocation();

  return (
    <div className="App">
      <Link to='/'>Home</Link> {' '}
      <Link to='/page1'>Page 1</Link> {' '}
      <Link to='/page2'>Page 2</Link>
      <main>
        {/* 路径为根路由时显示默认内容，否则渲染 Outlet */}
        {location.pathname === '/' ? <p>Home</p> : <Outlet/>}
      </main>
    </div>
  );
}

不过这种方式不如第一种贴合 React Router 的路由设计理念，除非有特殊需求，还是更推荐用 index 路由的方案。

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