Nested Routes (중첩 라우팅)

Narae Seo·2022년 10월 6일
0

ReactRouter

목록 보기
1/1

Nested Routes (중첩 라우팅)

라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법


1. 과거 버전

const Coin = () => {
	... 

		<Switch>
      <Route path={`/${coinId}/price`}>
        <Price />
			</Route>
	    <Route path={`/${coinId}/chart`}>
	      <Chart />
	    </Route>
	  </Switch>
};

2. 최근 버전

v6 이후 버전에서는 nested routes를 구현하는 방법이 달라졌는데
크게 두 가지로 나뉜다.

2-1. 첫 번째 방법

부모 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>

2-1. 두 번째 방법

가장 상단의 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>
  );
};

공식문서링크

React Router Overview v6.3.0

profile
꿈꾸는 프론트엔드 개발자

0개의 댓글