React) 리액트 라우터 02_useNavigate/nested routes/outlet

페이지이동 useNavigate()

페이지이동은 Link를 사용하는데,
이 방식은 a태그와 비슷하게 링크를 만들어낸다.
이러한 방식이 싫다면 useNavigate()라는 hook을 사용할 수 있다.

💡 Hook
리액트환경에서 쓸 수 있는 use- 가 붙은 것들.
일종의 내장함수로서 특정 기능을 수행해준다.

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

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

let navigate = useNavigate() 이러게 훅 자체를 변수에 담아 편리하게 사용한다.
navigate('/detail') : /detail 페이지로 이동
navigate(-1) : 뒤로 1번가기
navigate(1) : 앞으로 1번가기

---

404 페이지 path="*"

유저가 존재하지않는 페이지로 잘못 접근했을 때
'없는 페이지입니다.'등의 안내 페이지

 <Route path="*" element={ <div>없는페이지임</div> } />

path="*" : 개발되어있지않는 것까지 포함한 모든 페이지를 의미

---

서브 경로 만들기 nested routes

만약
/about/member로 접속하면 회사멤버 소개하는 페이지
/about/location으로 접속하면 회사위치 소개하는 페이지
처럼 어떠한 경로 아래의 하위 페이지를 또 만들어주고싶다면?

이렇게 하나하나 만들어도되지만,

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

이렇게 nested routes 라는 방식으로 안에 상위 route안에 넣어서
중첩해서 만들어줘도됨. 그러면! 바로 상위routes의 elements까지 같이 보여줌.

<Route path="/about" element={ <About/> } > //안에 outlet을 지정해줘야함. 
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

단 상위 route의 element인 About안에서도 어디다가 보여줄건지
구멍을 뚫어 표기를 해줘야함.
그게 바로 outlet

outlet

About 컴포넌트 안에 outlet으로 하위 route가 표기될 자리를 미리 만들어준다.

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}