React Router V6参数路由无法解析问题排查与解决

react-router-dom V6 中，嵌套路由的父路由必须通过 <Outlet /> 组件承载子路由的内容。你的配置里，/example 路由的 element 仅渲染了 <h1>Example</h1>，未包含 <Outlet />，导致访问 /example/34 时，子路由的 <p>cool</p> 没有挂载节点，页面显示为空。

1. 从 react-router-dom 导入 Outlet 组件：

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

2. 修改父路由的 element，将 Outlet 加入其中，作为子路由内容的渲染容器：

<Router>
  <Routes>
    <Route path="/">
      <Route path="example" element={
        <div>
          <h1>Example</h1>
          <Outlet /> {/* 子路由内容会渲染在此处 */}
        </div>
      }>
        <Route path=":id" element={<p>cool</p>} />
      </Route>
    </Route>
  </Routes>
</Router>

修改后访问 https://localhost:3000/example/34，页面会同时显示 <h1>Example</h1> 和 <p>cool</p>，内容正常渲染。

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