[React] Nested Router (중첩 라우터)

Route안에 있는 또 다른 Route로 부모 경로 요소에서 자식 경로 요소를 렌더링 하는 데 사용해야 한다.

 

* 참고 *
https://reactrouter.com/docs/en/v6/getting-started/overview

 

 

 

1. 첫번째 방법

( router 파일) 

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

• 부모 Route 안에 자식 Route 추가

 

( 부모 파일 ) 

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

function 부모() {
  return (
    <div>
      <h1>부모</h1>
      <Outlet /> 
    </div>
  );
}

• 자식 Route들이 어디에 render 될지 부모의 element안에 Outlet을 이용해 표시

 

( Props 전달)

<Outlet context={{ coinId: coinId }} />

 

• Qutlet 컴포넌트의 context 속성에 props 전달 가능

 

import { useOutletContext } from "react-router";

interface ChartProps {
  coinId: string;
}

 const data = useOutletContext<ChartProps>();

• useQutletContext Hook을 이용하여 props를 받아올 수 있다.

 

 

 

 

---

2. 두번째 방법

( router 파일) 

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

• /* 를 추가하여 명시적으로 route의 내부에서 nested route가 될 수 있다고 표시

 

 

( 부모 파일 ) 

function 부모() {
	return (
	  <div>
      		<h1>부모</h1>
                <Routes>
                    <Route path="chart" element={<Chart />} /> 
                    <Route path="price" element={<Price />} /> 
                </Routes>
	  </div>
	);
}

• 부모 element 내부에 자식 route 작성
• Routes가 상대 경로로 제공하기 때문에 path="chart”사용