React 쇼핑몰(리액트 라우터: navigate, nested routes, oulet)

navigate

지난번에 이어서 리액트 라우터에 대해서 계속 알아보겠습니다.

우선 이번에 해볼 것은 component를 담은 js 파일을 폴더를 만들어서 묶어보겠습니다.

그래서 이렇게 routes라는 폴더를 만들고, Component.js 라는 파일을 폴더 안에다가 넣어줬습니다.

 

그리고 이어서 알아볼 것은 useNavigate 입니다.

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

먼저, 이번에 배울 useNavigate와 Outlet을 import 해옵니다.

useNavigate는 페이지 이동 기능을 구현하고 싶을 때 사용합니다.

Link 써도 페이지 이동이 가능하고, useNavigate 써도 페이지 이동이 가능합니다.

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

사용 방법은, useNavigate() 함수를 변수에 저장합니다.

그리고 이동 버튼을 만들고 클릭했을 때 해당 함수가 실행되도록 코드를 짭니다.(버튼이 아니여도 가능)

마지막으로 navigate('/detail')을 넣으면 /detail 페이지로 이동이 가능합니다.

참고로, navigate(-1)를 넣으면 뒤로 한 번 가기, navigate(2)를 넣으면 앞으로 2번 가기 기능이 만들어집니다.

 

유저가 잘못된 페이지로 갔을 때, 없는 페이지라는 것을 보여주고 싶으면 보통 404페이지를 보여줍니다.

404페이지는 <Route path='*'>을 맨 밑에 만들어두면 됩니다.

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

네이버 404페이지 예시

 

 

 

nested routes

/about/member에 접속하면 회사 멤버 소개 페이지,

/about/location에 접속하면 회사위치 소개하는 페이지를 만들고 싶을 때는, nested routes를 사용할 수 있습니다.

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

물론, 위와 같이 route를 그냥 2개 추가해도 되지만,

nested routes와 같이 route 안에 route를 넣어서 사용하는 것도 가능합니다.

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

그리고 <About> 안에 해당 내용들을 어디다 보여줄지 표기해야합니다.

이 때 사용하는 것이 import 해왔던 <Outlet> 입니다.

Outlet는 nested routes 안의 요소들을 어디에 보여줄지 표기하는 곳입니다.

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

 

 

 

nested routes 실습

nested routes를 사용하여 쇼핑몰의 이벤트 페이지를 꾸며봅시다.

/event/one 과 /event/two 페이지에 접속했을 때 nested routes를 써서 다른 이벤트들이 보여지도록 코드를 짜보겠습니다.

function EventPage() {
  return (
    <div>
      <h2>오늘의 이벤트</h2>
      <Outlet></Outlet>
    </div>
  );
}

<Route path="/event" element={<EventPage />}>
  <Route
    path="one"
    element={
      <div>
        <h4>첫 주문 시 양배추즙 서비스</h4>
      </div>
    }
  />
  <Route
    path="two"
    element={
      <div>
        <h4>생일 기념 쿠폰받기</h4>
      </div>
    }
  />
</Route>