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

Question

我在 React (TypeScript) 中有一个相当简单的路由设置。我有一个我总是想显示的页眉和页脚。显示我的首页内容的主页组件。让我有点困扰的部分是项目部分。我有一个名为“项目”的单独页面，其中显示我参与过的项目。在项目页面上，我想单击实际项目并转到其各自的站点，如下面的代码块所示。下面的代码可以工作，但似乎是错误的。我尝试嵌套它，所以它看起来像 image2:

当我添加到 ProjectsPage 组件时，它肯定会渲染子路由。但是，它也会呈现父页面。理想情况下，我希望它们独立渲染。我希望这是有道理的。 谢谢！

下面的代码可以工作，但似乎是错误的。我尝试嵌套它，所以它看起来像第一个代码块。

当我添加到 ProjectsPage 组件时，它肯定会渲染子路由。但是，它也会呈现父页面。理想情况下，我希望它们独立渲染。我希望这是有道理的。 谢谢！

代码块 1 - 嵌套路由：

<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>

代码块 2 - 非嵌套路由：

<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>

Answer 1

您的“code1”示例与“code 2”不同，因为它将

ProjectsPage

呈现为布局路线。如果您希望两个代码示例等效，那么您应该将

ProjectsPage

渲染为

"/projects"

布局路线下的索引路线。

示例：

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

<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>