React Router v6嵌套路由访问子路径不显示子元素问题

这是React Router v6嵌套路由的标准规则导致的：父路由对应的组件必须内置<Outlet />组件作为子路由内容的渲染出口，你当前父路由的element仅返回了<h1>I am parent</h1>，没有预留子路由的挂载位置，因此访问子路由时仅能看到父路由内容，子路由内容没有渲染入口。

1. 先从react-router-dom依赖中导入Outlet组件：

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

2. 修改父路由的element配置，加入Outlet占位：

<Route path="/parent" element={<>
  <h1>I am parent</h1>
  <Outlet />
</>}>
  <Route path="child" element={<h1>I am child</h1>} />
</Route>

修改后完整的路由配置如下：

return (
<BrowserRouter>
  <Routes>
    <Route path="/parent" element={<>
      <h1>I am parent</h1>
      <Outlet />
    </>}>
      <Route path="child" element={<h1>I am child</h1>} />
    </Route>
    <Route
      path="*"
      element={
        <main style={{ padding: '1rem' }}>
          <p>There's nothing here!</p>
        </main>
      }
    />
  </Routes>
</BrowserRouter>
)

<Outlet />的作用就是在父路由组件内部预留占位位，当匹配到对应子路由时，会自动将子路由的组件渲染到该位置，你可以根据自己的布局需求调整<Outlet />在父组件中的摆放位置。

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