React Router 2 : navigate, nested routes, outlet

react-router-dom 에서 useNavigate와 Outlet을 가져와 사용한다.

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

1. 페이지 이동기능 : useNavigate()

funciont App() {
  let navigate = useNavigate()
  
  return (
    <button onClick={() => { navigate('detail') }}>이동버튼</button>
  )
}

useNavigate() : 페이지 이동시켜주는 함수

navigate('/detail') 이런 코드가 실행되면 /detail 페이지로 이동가능합니다.

ex) navigate(2) 앞으로 페이지 2번 이동
	navigate(-1) 뒤로 페이지 1번 이동

2. 404 Page 만들기

<Route path="*" element={ <div>없는 페이지입니다.</div> } />

* 경로는 모든 경로를 뜻해서 없는 페이지 접속시 * 경로로 안내해줍니다.

3. 서브경로 만들 수 있는 : nested routes

/about/member : 회사멤버 소개하는 페이지
/about/location : 회사위치 소개하는 페이지

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

<Route>안에 <Route>를 넣을 수 있는데 이것을 Nested routes 라고 부릅니다.
/about/member 접속시 <About> & <div>멤버들</div>
/aoubt/location 접속시 <About> & <div>회사위치</div>

function About() {
  return (
    <div>
      <h4>about</h4>
      <Outlet></Outlet>
    </div>
  )
}

<Outlet>은 nested routes 안의 element들을 어디에 보여줄지 표기하는 곳입니다.


여러 유사한 서브페이지가 많이 필요할 때 사용하면 좋습니다.

장점

• 이런식으로 UI를 만들면 뒤로가기 버튼 이용가능
• 페이지 이동이 쉬움 (UI 스위치 조작 쉬움)