navigate, nested routes, outlet

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

상단에 일단 import

페이지 이동 기능 - useNavigate()

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

• useNavigate() 쓰면 그 자리에 페이지 이동시켜주는 함수가 남는다.
• navigate('/detail') 이런 코드가 실행되면 /detail 페이지로 이동 가능
• navigate(2) 숫자 넣으면 앞으로 가기, 뒤로가기 기능 개발도 가능
  • -1 넣으면 뒤로 1번 가기
  • 2 넣으면 앞으로 2번 가기

404 페이지

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

• 유저가 이상한 경로로 접속했을 때 "없는 페이지" 라는 것을 보여주고 싶을 때
• <Route path="*"> 하나 맨 밑에 만들어주면 된다.
• *경로는 모든 경로를 뜻해서 다른 만들어둔 path가 아닌 이상한 페이지 접속 시 *경로로 안내

서브 경로 만들 수 있는 nested routes

• /about/member로 접속하면 회사 멤버 소개하는 페이지
• /about/location로 접속하면 회사 위치 소개하는 페이지 만들고 싶다면?

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

이렇게 만들어도 되지만

<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>를 보여줌
• /about/location으로 접속 시 <About>&<div>회사위치</div>를 보여줌
• 하지만 이렇게 작성할 시 잘 안 보임

<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>
  )
}

• <About> 컴포넌트 안에 <div>를 어디다 보여줄지 표기해야된다.
• import 해둔 <Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳
• 따라서 <Outlet> 자리에 박스들이 보여지게 된다.