React 路由器 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>;
}   

Answer 2

您可能永远不需要手动渲染 <Router>。相反，您应该根据您的环境使用更高级别的路由器之一。在给定的应用中，您只需要一个路由器。

你应该使用<BrowserRouter>。

<BrowserRouter> 是 推荐的 接口，用于在 Web 浏览器中运行 React Router。

所以你的代码会是这样的：

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

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