[React-Router-DOM v6] Nested Routes

Nested Routes(중첩 경로)를 작성하는 방법엔 두 가지가 있다.

1. /*

부모 Route의 path 뒤에 /*(와일드카드)를 붙이는 방법.
해당 경로 뒤에 오는 모든(*) 경로에 적용된다는 뜻으로, 해당 Route 내부에서 또다른 Route가 렌더링될 수 있음을 명시한다.
예를 들어, 아래 코드에서 /:coinId/*는 /:coinId로 시작하는 모든 경로에 대해 <Coin /> 컴포넌트를 렌더링한다.

// Router.tsx

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

이제 부모 Route가 렌더하는 컴포넌트(위의 경우 <Coin />) 내부에 자식 Route의 path와 element를 작성한다.

// Coin.tsx

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

상대경로를 지원하므로 path="/:coinId/price"로 작성할 필요없이, path="chart"로 작성해도 정상 동작한다.

2. Wrapping

부모 Route로 자식 Route를 감싸는 방법.

// Router.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가 렌더링하는 <Coin /> 내부에 자식 Route를 렌더링할 위치를 <Outlet />으로 표시한다.

// Coin.tsx

<Container>
  <Overview />
  <Outlet />
</Container>