react 라우터 (navigate, nested routes, outlet)

오늘 배울 것들 import

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

1. 페이지 이동기능을 만들고 싶으면 useNavigate()

Link 써도 되지만, 그게 디자인이 구리면 useNavigate 사용ㄱ ㄱ

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

2. 404페이지

유저가 이상한 경로로 접속하였을 때, 없는 페이지라고 보여줄 수 있음.

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

* 경로는 모든 경로를 뜻함. 위에 만들어 두지 않은 url일 경우, * 경로로 안내해줌.

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

예를 들어,
/about/member로 접속하면 회사멤버 소개하는 페이지
/about/location으로 접속하면 회사위치 소개하는 페이지
를 만들고 싶다면, 아래와 같이 작성할 수 있다.

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

nested routes를 사용할 경우, 아래처럼도 사용 가능.

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

<Route>안에 <Route>를 넣을 수 있는데 이걸 Nested routes 라고 부른다!

nested routes를 사용할 경우,

• /about/member로 접속시 <About> & <div>멤버들</div> 을 보여준다.
• /about/location으로 접속시 <About> & <div>회사위치</div> 을 보여준다.

근데 <About> 컴포넌트 안에 <div>를 어디다 보여줄지 표기해야 보임.
이때 사용하는게 Outlet 임.

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

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

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

위 코드에 따르면,
/about/member로 접속시 <Outlet>자리에 아까의 <div> 박스들이 잘 보이게 된다~~
(유사한 서브페이지들이 많이 필요하다면 이렇게 만들어도 됨!)