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”사용
반응형
'React' 카테고리의 다른 글
[React] ApexCharts.JS 차트 사용 방법 (0) | 2022.08.30 |
---|---|
[ReacTS] React Query를 이용한 API 통신(useQuery, useQueries) (0) | 2022.08.25 |
[React] React CSS 셋업 방법(CSS reset, Font 적용) (0) | 2022.08.21 |
[ReactTS] TypeScript 기본 문법 (0) | 2022.08.20 |
[ReactTS] React TypeScript 프로젝트 생성 방법 (0) | 2022.08.20 |