[React] 10. 페이지 이동 기능 -useNavigate/404/nested routes

이전 포스트에서는 Link를 통하여 페이지 이동을 구현하였다
이번에는 그 외의 방법들을 알아보겠다

• useNavigate
• 404 페이지 구현 방법
• 서브경로 만들기 nested routes - Outlet

---

🖤 useNavigate

React Router의 API로 라우팅을 해준다
이전에 Link를 이용하여 아래처럼 구현하였지만

상세페이지 useNavigate를 사용하면 글씨 색과 밑줄이 생기는 문제가 생기니, 그게 싫으면 이걸 사용하면 된다 > href 대신 onClick을 통해 useNavigate 경로 설정 navigate('/detail') : detail 페이지로 이동 navigate(-1) : 뒤로 1번 가기 navigate(2) : 앞으로 2번 가기

<Nav className="me-auto">   
  <Nav.Link href="/detail">상세페이지</Nav.Link>
  <Nav.Link onClick={()=>navigate('/detail')}>상세페이지</Nav.Link>
</Nav>

🤔 href 와 useNavigate의 차이가 뭘까?

실험을 해보니 전자는 페이지 새로고침이 되고 후자는 되지 않은채로 새로운 html이 렌더링 되었다
후자가 SPA인 리액트에 더 적합한 방식인 듯 하다

href

• 전통적인 웹 페이지 이동 방식을 사용
• 이 방식은 전체 페이지를 새로 고침하며, SPA에서는 일반적으로 권장되지 않음

navigate

• 브라우저의 히스토리 API를 사용하여 URL만 변경하고 필요한 컴포넌트만을 다시 렌더링한다
• 애플리케이션의 상태를 유지하며 빠르고 부드러운 페이지 전환 제공

🖤 404 페이지

개발자가 지정한 경로가 아닌 경로로 유저가 접속 했을 시 "페이지를 찾을 수 없다" 라는 의미의 404 페이지를 만날 수 있다
만약 유저가 이상한 경로로 접속했을 때 "없는 페이지입니다" 같은 것을 보여주기 위해서는

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

모든 경로라는 의미는 * 를 사용하여 지정된 경로 외의 경로로 접속 시 안내해줄 것을 지정한다

🖤 서브 경로 nested routes

/event/service 접속하면 진행중인 서비스 정보,
/event/coupon 접속하면 쿠폰 정보를 띄우고 싶다면
event 의 서브 경로를 활용하면 된다

<Route path='/event' element={<Event></Event>}>
  <Route path="service" element={<div>첫 주문 시 양배추즙 서비스</div>} />
  <Route path="coupon" element={<div>생일기념 쿠폰받기</div>} />
</Route>

위와 같이 경로를 지정해두면,
/event/service로 접속시 <Event> &<div>첫 주문 시 양배추즙 서비스</div> 를 보여주고

/event/coupon 접속시 <Event> & <div>생일기념 쿠폰받기</div> 를 보여준다

하지만 보여주기 위해서는 보여줄 위치를 Event 에 표시해야 하는데 ! (일명 구멍뚫기)

function Event(){
  return(
    <>
    <h2 className='event-title'>오늘의 이벤트</h2>
    <Outlet></Outlet>
    </>
  )
}

위와같이 내가 service의 html을 보여주고 싶은 곳에 Outlet 태그를 달아놓으면 된다

🙌 /event

🙌 /event/sevice

🙌 /event/coupon

👌 이렇게 Outlet 태그를 달아놓은 곳에 각 서브 경로에 해당하는 html이 보여지는 것을 확인할 수 있다