reactjs - React router v6 socket 似乎不起作用

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

您可能永远不需要渲染 <Router>手动。 相反，您应该根据您的环境使用更高级别的路由器之一。在给定的应用程序中，您只需要一个路由器。
您应该使用 <BrowserRouter> .<BrowserRouter>是 推荐 在 中运行 React Router 的接口(interface)网页浏览器。
所以你的代码会是这样的:

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<ParentComponent />}>
        <Route path="child" element={<ChildComponent />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

<Router>是所有路由器组件共享的低级接口(interface) ( <BrowserRouter>, <HashRouter>, <StaticRouter>, <NativeRouter>, <MemoryRouter> )。就 React 而言，它是一个上下文提供程序，为应用程序的其余部分提供路由信息。