[React] Router -2 Nested(중첩) Router 및 Param, Navigate

Nested Router

<Router> 태그 안에는 <Router> 태그가 존재할 수 있다.

이 경우 <Router> 내의 페이지 안에 하위 경로를 설정해 지정할 수 있는데, 이것을 Nested Router라고 한다.

App.js

<Router> 내에 <Router>를 표시하고 싶을 경우 <Outlet>이라는 태그를 사용해 활성화 시킬 수 있다.

IndexPage.js

home이나 hello 경로로 들어갔을 때 ,

App.js에서 분명 IndexPage 말고도 아래에 Route가 두개 더 있어서 떠야하는데 안뜬다. <Outlet>이 없어서 그렇다.

Outlet을 추가해야 중첩 Router를 사용할 수 있어 위와 같이 <Route> 아래에 있던 <Route>도 추가 된 것을 볼 수 있다.

 

ReactRouterHooks

React Router에는 여러 hook들을 제공하는데, 그 중 3가지

useParams - URL 파라미터 정보를 가져와 활용할 경우 사용
useSearchParams - URL 파라미터 뒤 쿼리 스트링 정보를 가져와 활용할 경우 사용
useNavigate - 페이지를 이동할 수 있는 함수를 사용할 경우 사용

 

useParams

App.js

 

component -> Comp.js

 

 

useSearchParams

App.js

 

Comp2.js

 

 

 

useNavigate

 

useNavigate는 Reoutes 안에 위치해야한다. 따라서 Comp1 안에다가  navigate를 선언해주고 사용하였다.