📋 Nested Routes
중첩 라우팅을 작성하는 방법에 대해 알아보고자 한다.
중첩 라우팅은 특정 페이지의 서브 페이지를 만드는 개념이라고 생각할 수 있다.
특정 페이지에서 구분값을 주어 화면을 교체해야할 때 사용한다.
현재 진행중인 프로젝트로 예시를 들어보면 특정 암호화폐 클릭 시 해당 암호화폐 세부 정보 페이지로 이동한다.
세부 정보 페이지에 가격, 차트를 보여주는 컴포넌트 두개가 있을 때 중첩 라우팅을 통해 특정 컴포넌트를 보여줄 수 있는 것이다.
중첩 라우팅을 구현하는 방법은 2가지가 있다.
첫 번째 방법은 상위 라우트의 경로 작성 부분에 /*를 추가해 라우트 내부에서 중첩 라우트가 될수 있다고 명시해준다.
- Router.tsx
<Route path="/:coinId/*" element={<Coin />} />하위에 있는 라우트는 자동으로 /로 구분되어 추가적인 /를 경로에 지정해주지 않아도 된다.
- Coin.tsx
<Routes>
<Route path="price" element={<Price />} />
<Route path="chart" element={<Chart />} />
</Routes>두 번째 방법은 Outlet을 이용하는 것이다.
Outlet은 하위 경로 요소를 렌더링하기 위해 상위 경로 요소에서 사용된다.
자식 라우트를 부모 라우트 내부에 작성한 후 라우트 경로대로 컴포넌트가 보여져야 하는 부분에 Outlet 컴포넌트를 넣어주는 것이다.
Outlet 영역의 각 route 경로에 맞는 컴포넌트가 렌더링 되어 나타난다.
- Router.tsx
<Route path="/:coinId/*" element={<Coin />}>
<Route path="price" element={<Price />} />
<Route path="chart" element={<Chart />} />
</Route>- Coin.tsx
<Outlet />참고
