Nested Routes

Navigate

let navigate = useNavigate();

https://reactrouter.com/en/main/hooks/use-navigate

react router dom에서 제공하는 페이지 이동 관련 함수 집합.

onClick 이벤트 핸들러에서 navigate('url')을 호출하면 클릭시 해당 url로 페이지를 이동한다.

<Nav.Link onClick={() => { navigate('/detail')}}> ...

---

404 Page

Routes에 지정해주지 않은 주소로 접근시 404 Page를 띄우고 싶은 경우

<Route path='*' element={ ... }/>

* 표시가 Route에 지정되지 않은 나머지 모든 주소를 의미한다.

---

Nested Routes

하나의 페이지 내 하위 페이지를 보여줄 때 사용하는 방법.

<Route path='/about' element={...}>
  <Route path='about_low' element={...}/> // 실제 주소는 /about/about_low가 된다.
  <Route path='about_low2' element={...}/>
</Route>

Route 내 다른 하위 Route를 선언하는 방법이다.

Nested Routes의 특징은 부모 Route의 element와 자식 Route의 element가 함께 보이게 된다.

자식 Route의 element는 부모 Route의 element 내에 보여주게 되는데, 부모 element에 <Outlet> component를 통해 자식 element가 표시될 위치를 지정한다.