布局路由

当访问 /privacy 时，会先渲染 <PageLayout /> 布局组件，再在布局组件<PageLayout />中的<Outlet>中渲染<Privacy />组件，所以不要忘记在布局组件中加入 <Outlet> 。

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
      <Route path=":teamId/edit" element={<EditTeam />} />
      <Route path="new" element={<NewTeamForm />} />
      <Route index element={<LeagueStandings />} />
    </Route>
  </Route>
  <Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
  </Route>
  <Route path="contact-us" element={<Contact />} />
</Routes>

PageLayout 布局组件可能是这样的

import { Outlet } from 'react-router-dom'
function PageLayout() {
  return (
    <>
      <HeadArea />
      <MenuArea />
      <div className={styles.centerarea}>
        <Outlet />
      </div>
      <FootArea />
    </>
  )
}
export default PageLayout

最终呈现的元素树将是

<PageLayout>
  <Privacy />
</PageLayout>

PageLayout 路由确实很奇怪。我们称其为布局路由，是因为它根本不参与匹配（尽管其子路由参与了匹配）。它的存在只是为了简化在同一布局中封装多个子路由的过程。如果我们不允许这样做，那么你就必须用两种不同的方式来处理布局：有时你的路由会帮你处理，有时你需要在整个应用中手动重复大量的布局组件：您可以这样做，但我们建议您使用布局路线

这是一个错误的示例：

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
      <Route path=":teamId/edit" element={<EditTeam />} />
      <Route path="new" element={<NewTeamForm />} />
      <Route index element={<LeagueStandings />} />
    </Route>
  </Route>
  <Route
    path="/privacy"
    element={
      <PageLayout>
        <Privacy />
      </PageLayout>
    }
  />
  <Route
    path="/tos"
    element={
      <PageLayout>
        <Tos />
      </PageLayout>
    }
  />
  <Route path="contact-us" element={<Contact />} />
</Routes>