React router v6 出口似乎不起作用

Question

ReactDOM.render(
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/child">Child</Link>
    </nav>
    <Routes>
      <Route path="/" element={<ParentComponent />} />
      <Route path="child" element={<ChildComponent />} />
    </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>
  );
}

当我访问 /child 路线时，我期待以下输出：
我是父组件
我是子组件

而不是上面我只是得到：
我是子组件

Answer 1

下面的代码有效。现在，如果我访问 Home(/) 路由，我得到的输出为“我是父组件”，当我访问 Child(/child) 路由时，我得到“我是父组件，我是子组件”。这正是我所期待的。

早些时候我没有嵌套路线。相应地纠正了我的问题。

ReactDOM.render(
  <BrowserRouter>
    <nav>
        <Link to="/">Home</Link>
        <Link to="/child">Child</Link>
      </nav> 
    <Routes>
      <Route path="/" element={<ParentComponent />}>
        <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>;
}