라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법
const Coin = () => {
...
<Switch>
<Route path={`/${coinId}/price`}>
<Price />
</Route>
<Route path={`/${coinId}/chart`}>
<Chart />
</Route>
</Switch>
};
v6 이후 버전에서는 nested routes를 구현하는 방법이 달라졌는데
크게 두 가지로 나뉜다.
부모 route의 path에서 주소의 마지막에 *를 추가해
해당 route의 내부에 nested route가 render 될 수 있음을 명시적으로 표시한다.
// Router.tsx
<Route path="/:coinId/*" element={<Coin/>} />
// Coin.tsx
<Routes>
<Route path="chart" element={<Chart />} />
<Route path="price" element={<Price />} />
</Routes>
가장 상단의 route 내부에 자식 route를 작성 후
화면이 보여질 부분에서 outlet 작성한다.
// Router.tsx
// Router.tsx
import Chart from './routes/Chart';
import Price from './routes/Price';
<Route path="/:coinId" element={<Coin />} >
<Route path="chart" element={<Chart />} />
<Route path="price" element={<Price />} />
</Route>
// Coin.tsx
import { Outlet } from "react-router-dom";
const Coin = () => {
<Container>
....
<OverviewItem>
<span>Max Suply: </span>
<span>{priceInfo?.max_supply}</span>
</OverviewItem>
</Overview>
<Outlet />
)}
</Container>
);
};
공식문서링크