2023-05-05

navigate함수, 404페이지, nested routes

react 폴더로 묶기
비슷한 특성의 아이들끼리 묶는다
ex) 컴포넌트 역할 js는 components
페이지 역할 js는 routes or pages
자주 쓰는 함수가 들어간 js는 utils 등등

1. navigate 함수: 페이지 이동을 도와주는 것.
   use~이런 것들은 훅이라고 하는 데 유용한 게 들어 있는 함수 같은 것을 말함.
   1)상단에 사용할 것들을 import 한다.
   2)페이지 이동을 원하는 곳에 onclick={()=>{ navigate('/원하는 이름')}}으로 작성한다.

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

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

페이지 이동은 Link 써도 된다고 했는데 그게 별로면 navigate를 쓰면 됩니다.

 <Nav.Link onClick={()=>{ navigate(2) }}>Home</Nav.Link>

위와 같이 숫자를 넣으면 앞으로 가기, 뒤로 가기도 가능. -1은 뒤로 1번 가기, 2는 앞으로 2번 가기

2. 404페이지 : 유저가 예상치 못한 경로로 접속했을 때 없는 페이지라는 걸 알려주는 용도

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

은 모든 경로를 뜻해서 유저가 다른 경로로 접속 했을 때 경로로 안내해준다.

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

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

Route안에 Route를 넣을 수 있음. 그렇게 하면 주소창에 /about/member로 접속 시 About &div멤버들/div 을 보여줌.

옴뫔마? 두 가지를 보여준다는데 왜 어바웃 페이지만 보이지?

응 사쉴은 저게 다 알려준 게 아니다. nested routes를 쓰려면 div를 어디에 보여줄지 표기해야한다.
like this.

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

우리가 위에 Outlet을 import 해준 거 기억 나는가?
여기서 쓰인다.
Outlet은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳이다.
아래처럼 잘 나온다

!여기서 드는 궁금증. 그러면 위에 내가 썼듯이 /about에 내가 member랑 location 두 가지를 넣어놨는데 위치는 둘 다 같은 곳으로 넣는 것 밖에 못하는 걸까?

=하나의 컴포넌트에서는 하나의 outlet만 사용할 수 있는 걸까?

내가 배우는 홈페이지 창에는 유사한 서브페이지들이 많이 필요하다면 위처럼 써도 된다고 나오네. 오케이 뒤에 이거를 대체할 수 있는 내용이 나오는지 더 배워봐야겠다.

<오늘의 숙제>
1. /event/one 페이지로 접속하면 '오늘의 이벤트 첫 주문 시 양배추즙 서비스'가 적힌 페이지가 뜨게 하기.

2. /event/two 페이지로 접속하면 '오늘의 이벤트 생일 기념 쿠폰 받기'가 적힌 페이지가 뜨게 하기.

<내가 한 숙제>

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

function Event(){
  return(
    <div>
      <h1>오늘의 이벤트</h1>
      <Outlet></Outlet>
    </div>
  )
}

Easy Peasy, Lemon Squeezy
아주 잘했어요!