[TIL] 중첩 라우팅(Nested Routes) (feat. React-Router-DOM v6)

react-router-dom 6 이상 버전에서 nested routes를 구현하는 방법에는 두 가지가 있다.

참고 사이트 - The Guide to Nested Routes with React Router

---

1. 부모 Route path에 `/*`

부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 렌더링될 수 있음을 표시하고, 자식 route를 부모 route의 element 내부에 작성하는 방법

// Router.tsx
<Route path="/:coinId/*" element={<Coin/>} />

// Coin.tsx
<Routes>
  <Route path="chart" element={<Chart />} />
  <Route path="price" element={<Price />} />
</Routes>

• Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작한다.

 

 

---

2. 자식 Route를 Route 내부에 작성

자식 route를 부모 element의 내부가 아닌 route 내부에 작성하는 방법

// ...
import Price from "./Price";
import Chart from "./Chart";
// ...

<Route path="/:coinId" element={<Coin />} >
  <Route path="chart" element={<Chart />} />
  <Route path="price" element={<Price />} />
</Route>

• 그리고 이 자식 Route들이 어디에 렌더링될지 부모의 element안에 <Outlet />을 이용하여 표시
• Coin.tsx에서, react-router-dom에서 Outlet을 import하고 Overview와 Container 사이에 <Outlet />를 작성

 

 

---

3. 투두리스트에서 작성한 Router 관련 코드

• 이번 투두리스트를 만들면서 2번의 방법을 사용해서 자식 route들을 설정해주고, 부모 route에 해당하는 <RootLayout />과 <MainLayout />에 <Outlet />을 작성해주었다.
• 레이아웃 컴포넌트를 RootLayout과 MainLayout로 나눈 이유는, intro 페이지에서는 Header 컴포넌트와 Side 컴포넌트가 보이지 않고, main 페이지에서만 보여주는 레이아웃으로 설정하고 싶어서 따로 나누어주었다.

// Router.tsx
import { createBrowserRouter } from "react-router-dom";

import RootLayout from "components/layout/RootLayout";
import Intro from "components/pages/Intro";
import MainLayout from "components/layout/MainLayout";
import Main from "components/pages/Main";

const Router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        path: "",
        element: <Intro />,
      },
      {
        path: "/main",
        element: <MainLayout />,
        children: [
          {
            path: "",
            element: <Main />,
          }
        ]
      },
    ]
  }
])

export default Router;

// RootLayout.tsx
import { Outlet } from "react-router-dom";

const RootLayout = () => {
  return (
    <>
      <Outlet />
    </>
  );
};

export default RootLayout;

// MainLayout.tsx
import Side from "components/layout/Side";
import Header from "components/layout/Header";

import { Outlet } from "react-router-dom";
import { styled } from "styled-components";

const MainLayout = () => {
  return (
    <>
      <Side />
      <StMainWrapper>
        <StHeaderWrapper>
          <Header />
        </StHeaderWrapper>
        <Outlet />
      </StMainWrapper>
    </>
  );
};

export default MainLayout;

// ...styled-components 생략

 

• 다음에는 1번의 방법도 직접 사용해보면서 여러가지 방법에 익숙해지고 싶다!