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

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

  •  2
  • 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 年前
        1
  •  0
  •   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>