[React][TypeScrpit] react-router-dom v6 - Nested Routes (중첩 라우팅)

중첩 라우팅이란

중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 쉽게 말해서 route안에 있는 또 다른 route이다. 

https://ui.dev/react-router-nested-routes/

The Guide to Nested Routes with React Router

공식문서에서 설명해주는 것을 보면

v6에서 nested routes를 구현하는 방법은 두 가지가 있다.

1. 부모 route의 path 마지막에 "/*"를 적어 명시적으로 이 route의 내부에서 nested router가 render될 수 있음을 표시하고 , 부모 route의 element내부에 작성하는 방법이다.

 

----------Router.tsx----------

<BrowserRouter>
  <Routes>
    <Route path="/:coinId/*" element={<Coin />} />
    <Route path="/" element={<Coins />} />
  </Routes>
</BrowserRouter>

-----------Coin.tsx----------

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

이런식으로 부모의 route에 routes와 route를 추가하여 표시하는 방법이다. 

 

2. 전체 라우터를 관리하는 Router.tsx에서 자식 Route들을 부모 Route로 감싸준다.

----------Routes.tsx----------

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

그리고 이 자식 Route들이 어디에 Render 될지 부모의 Element안에 Outlet을 이용해 표시해주면 된다. 

--------Coin.tsx----

<Container>
  <Header />
  <Outlet />
</Container>

결과 화면은 아래와 같다.