React Router v6 中Outlet未生效，访问子路由时父组件内容不展示

你当前的路由配置把/和child声明为了同级路由，React Router v6 匹配路由时只会渲染命中的那一个路由对应的元素：

• 访问/时命中path="/"的路由，渲染ParentComponent
• 访问/child时命中path="child"的路由，直接渲染ChildComponent，完全不会触发ParentComponent的渲染逻辑，自然也不会用到ParentComponent里的<Outlet />插槽。

嵌套路由的核心规则就是：子路由必须作为父路由的children属性声明，才能在匹配时渲染父组件并把自身内容注入父组件的<Outlet />位置。

调整路由结构，把child路由作为/路由的子项配置即可：

ReactDOM.render(
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/child">Child</Link>
    </nav>
    <Routes>
      <Route path="/" element={<ParentComponent />}>
        {/* 访问 / 路径时，Outlet 位置无额外内容，仅展示父组件，不需要的话可以省略该行 */}
        <Route index element={null} />
        {/* 访问 /child 路径时，Outlet 位置渲染 ChildComponent */}
        <Route path="child" element={<ChildComponent />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

function ParentComponent() {
  return (
    <div>
      <h1>i am parent component</h1>
      <Outlet />
    </div>
  );
}
function ChildComponent() {
  return (
    <div>
      <h1>i am child component</h1>
    </div>
  );
}

如果需要访问/时在Outlet位置渲染首页内容，只需要把index路由的element替换为对应的首页组件即可。

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