router 2: navigate, nested routes, outlet

router 2: navigate, nested routes, outlet

1. 페이지 이동을 도와주는
   1. useNavigate() - 아래 함수를 실행하면 페이지 이동됨
   2. <Link to onClick={() => { navigate('/detail')}}>상세페이지</Link>
   3. 앞으로, 뒤로 이동
   4. <Link to onClick={() => { navigate (1) }}>Home</Link> 앞으로 1 페이지 이동 <Link to onClick={() => { navigate(-1) }}>Home</Link> -1 페이지 이동
2. 404 페이지는 아래 코드로 입력

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

1. Nested Routes
   1. route가 간단해짐 -
   2. nested route 접속 시엔 element 2개나 보임
   3. 이거 어디서 씀? → 여러 유사한 페이지가 필요할 때
   4. 모달창, 탭 기능
   5. 뒤로 가기 버튼 이용가능 / 페이지 이동도 쉬움

<Route path='/about' element={<About />}>
  <Route path='member' element={<About />} />
  <Route path='location' element={<About />} />
 </Route>

아래로 바로 쓰게 되면 보이지 않는다. 그래서 outlet이라는 것을 이용해서 보여준다.

탭 느낌 / 어떤 탭 안에 다른 탭 보여줄 때

<Route path='member' element={<div>멤버임</div>} />

function About() {
  return (
    <div>
      <h4>회사 정보임</h4>
      <Outlet></Outlet>
    </div>
  )
}

위와 같이 입력했을 때

/about/member 접속 시

<About> & <div>멤버임</div>도 같이 보임