[React] Nested Routes

Nested Routes는 route 안에 있는 또 다른 route입니다.

React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다.

React Router v5

nested routes를 구현하는 방법은 자식 route를 부모 route의 element 내부에 작성하는 것입니다.

// Router.tsx
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Coin from './routes/Coin';
import Coins from './routes/Coins';

function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/:coinId">
          <Coin />
        </Route>
        <Route path="/">
          <Coins />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}
export default Router;

// Coin.tsx
import { Switch, Route } from 'react-router-dom';

function Coin() {
  return (
    <Container>
      <Header>
        <Title></Title>
      </Header>
      <Switch>
        <Route path="price">
          <Price />
        </Route>
        <Route path="chart">
          <Chart />
        </Route>
      </Switch>
    </Container>
  );
}

export default Coin;

React Router v6

nested routes를 구현하는 방법은 두 가지가 있습니다. 6 버전에서는 Switch 가 Routes로 변경됐습니다.

첫 번째

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

// Router.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Coin from './routes/Coin';
import Coins from './routes/Coins';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/:coinId/*" element={<Coin />}></Route>
        <Route path="/" element={<Coins />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

// Coin.tsx
import { Routes, Route } from 'react-router-dom';

function Coin() {
  return (
    <Container>
      <Header>
        <Title></Title>
      </Header>
      <Routes>
        <Route path="price" element={<Price />}></Route>
        <Route path="chart" element={<Chart />}></Route>
      </Routes>
    </Container>
  );
}

export default Coin;

두 번째

자식 route 를 부모 element의 내부가 아닌 Router 내부에 작성하는 방법입니다. 그리고 이 자식 Route들이 어디에 render 될지 부모의 element 안에 Outlet을 이용해 표시해 주면 됩니다.

// Router.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Chart from './routes/Chart';
import Coin from './routes/Coin';
import Coins from './routes/Coins';
import Price from './routes/Price';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/:coinId" element={<Coin />}>
          <Route path="price" element={<Price />} />
          <Route path="chart" element={<Chart />} />
        </Route>
        <Route path="/" element={<Coins />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

// Coin.tsx
import { Outlet, Routes, Route } from 'react-router-dom';

function Coin() {
  return (
    <Container>
      <Header>
        <Title></Title>
      </Header>
      <Outlet />
    </Container>
  );
}

export default Coin;

참고

• https://ui.dev/react-router-nested-routes
• https://reactrouter.com/docs/en/v6/getting-started/overview