reactjs - แนวทางปฏิบัติที่ดีที่สุดในการใช้งานเส้นทางซ้อนที่มีหน้าที่เป็นอิสระใน React คืออะไร?

ฉันมีการตั้งค่าเส้นทางที่ค่อนข้างง่ายใน React (TypeScript) ฉันมี Header และ Footer ที่ฉันต้องการให้แสดงตลอดเวลา มีคอมโพเนนต์หน้าแรกที่แสดงเนื้อหาหน้าแรกของฉัน ส่วนที่ทำให้ฉันรำคาญเล็กน้อยคือส่วนโปรเจกต์ ฉันมีหน้าที่แยกออกมาชื่อ Projects ที่แสดงโปรเจกต์ที่ฉันเคยทำ ขณะที่อยู่ในหน้าของโปรเจกต์ ฉันต้องการคลิกที่โปรเจกต์จริงๆ แล้วไปยังเว็บไซต์ของพวกมันตามที่แสดงในโค้ดด้านล่าง โค้ดด้านล่างใช้งานได้ แต่ดูเหมือนจะผิด ฉันพยายามทำการซ้อนมันให้ดูเหมือน image2:

เมื่อฉันเพิ่ม <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

ตัวอย่าง "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>