Typescript 在React中实现具有独立页面的嵌套路径的最佳实践是什么

我在React(TypScript)中有一个相当简单的路由设置.我有一个Header和一个Footer，我总是想显示.显示我的头版内容的主页组件.让我有点困扰的部分是项目部分.我有一个名为"项目"的单独页面，显示我参与过的项目.在项目页面上，我想点击实际项目并访问各自的网站，如下面的代码块所示.下面的代码有效，但似乎错误.我try 将其嵌套，这样它看起来就像图片2:

当我将<Outlet/>添加到ProjectsPage组件时，它确实会渲染子路由.然而，它也会呈现父页面.理想情况下，我希望它们能够独立呈现.我希望这是有意义的.

Code Block 1 - Nested routes:

<Router>
  <Header />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/projects" element={<ProjectsPage />}>
      <Route path="portfolio" element={<PortfolioProject />} />
      <Route path="realestateapp" element={<RealEstateProject />} />
    </Route>
    <Route path="*" element={<NoPage />} />
  </Routes>
  <Footer />
</Router>

Code Block 2 - Non nested routes:

<Router>
  <Header />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/projects" element={<ProjectsPage />} />
    <Route path="/projects/portfolio" element={<PortfolioProject />} />
    <Route path="/projects/realestateapp" element={<RealEstateProject />} />
    <Route path="*" element={<NoPage />} />
  </Routes>
  <Footer />
</Router>