V6 Nested Router

중첩 Nested Router에는 두 가지 방법이 있다.

첫번째 방법

자식 Route를 가지는 부모 Route에 path에 *와일드카드를 추가하여 뒤에 또 다른 경로가 추가 될 것을 알려 해당 Route 내부에서 또 다른 Route가 render가 됨을 알린다.

아래에서는 src/Router.tsx에서 부모 Route로 명시된 <Coin />컴포넌트안에 <Price />와 <Chart />를 중첩하여 사용할 것이다.

src/Router.tsx

	<BrowserRouter>
      <Routes>
        <Route path="/" element={<Coins />} />
        // 기존 코드뒤에 *를 추가함으로써 중첩 분기를 알린다
        <Route path="/:coinId/*" element={<Coin />} />
      </Routes>
    </BrowserRouter>

coin.tsx에서 중첩 route에 쓰일 Routes와 Route를 import를 하고 컴퍼넌트가 render될 부분에 아래의 코드를 넣어준다.

src/routes/coin.tsx

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

props전달하기

중첩 Route에서 props를 전달하기 위해 상위 Route에서 props로 전달하여 보내고 props를 받는 하위 컴포넌트에서 props 타입을 지정해준다.

src/routes/coin.tsx

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

src/routes/chart.tsx

interface IChartProps {
  coinId: string;
}

export default function Chart({ coinId }:IChartProps) {
  return <h1>Chart : {coinId}</h1>;
}

두번째 방법

상위 Router에서Nested Route가 필요한 Route를 찾아 자식으로 중첩될 Route를 하위 Route로 넣어 준뒤 render가 될 위치에서 <Outlet />을 표시해준다.

src/router.tsx

	<BrowserRouter>
      <Routes>
        <Route path="/" element={<Coins />} />
        <Route path="/:coinId" element={<Coin />}>
          <Route path="price" element={<Price />} />
          <Route path="chart" element={<Chart />} />
        </Route>
      </Routes>
    </BrowserRouter>

Nested Route를 사용할 component에서 Outlet을 import하여 render할 위치를 지정해 준다.

src/routes/coin.tsx

	<Container>
    	<OverView>
      		...
      	</OverView>
		<Outlet />
    </Container>

props전달하기

<Outlet />에 전달하고 싶은 값을 context로 보내고 useOutletContext을 이용하여 그 값을 받는다.

src/routes/coin.tsx

	<Container>
    	<OverView>
      		...
      	</OverView>
		<Outlet context={coinId}/>
    </Container>

src/routes/chart.tsx

import { useOutletContext } from "react-router-dom";

interface IChartProps {
  coinId: string;
}

export default function Chart() {
  const data = useOutletContext<IChartProps>()
  return <h1>Chart : {data}</h1>;
}