代码之家 › 专栏 › 技术社区 › Anil Ferhat Ceran

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

react-router-dom react-router typescript reactjs

Anil Ferhat Ceran · 技术社区 · 1 年前

我在React(TypeScript)中有一个相当简单的路由设置。我有一个 Header 和一个 Footer 我一直想展示的东西。显示我的首页内容的主页组件。让我有点困扰的是项目部分。我有一个单独的页面,名为Projects,显示我工作过的项目。在项目页面上,我想点击实际的项目并转到它们各自的网站,如下面的代码块所示。下面的代码有效,但似乎是错误的。我试着将其嵌套,使其看起来像图2:

当我添加 <Outlet/> 到我的 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>

1 回复 | 直到 1 年前

Drew Reese 1 年前

您的“代码1”示例与“代码2”不同,因为它呈现 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>