React : 리액트 라우터 (navigate, 404페이지, nested routes, outlet)

navigate

navigate 사용하는 법

1. react-router-dom에 import한다.

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

2. 변수에 함수를 할당하고 원하는 위치에 onClick 이벤트로 걸어둔다.

function App() {
  let navigate = useNavigate()
  
  return (
    <div className="App">
      <Nav.Link onClick={ ()=>{ navigate('/cart') } }>장바구니</Nav.Link>
      <Nav.Link onClick={ ()=>{ navigate('/detail') } }>상세보기</Nav.Link>
    </div>
  );
}

---

재밌는 기능

navigate 안에 -1을 넣으면 뒤로가기, 2를 넣으면 앞으로 두번 가기 이런 기능들이 있다고 한다.

<Nav.Link onClick={ ()=>{ navigate('-1') } }>뒤로가기</Nav.Link>
<Nav.Link onClick={ ()=>{ navigate('1') } }>앞으로가기</Nav.Link>

---

404페이지 만들기

사람들이 하위폴더에 오타를 낸다거나 하는 식으로 잘못된 경로로 접근했을 때 띄우는 잘못된 페이지임을 표시하는 페이지를 만들 수 있다.

Route path에 *를 넣으면 된다. 이는 이외의 모든 페이지를 의미한다.

<Routes>
  <Route path="/" element={ <Main shoes={shoes}/> }/>
  <Route path="/cart" element={<div>상세페이지 내용1</div>} />
  <Route path="*" element={ <div>저런! 존재하지 않는 페이지입니다.</div> }/>
</Routes>

---

nested routes

Route 안에 Route를 넣으면 서브경로를 만들어 페이지들을 만들 수 있다.

<Route path="/about" element={ <About /> }>
  <Route path="member" element={<div>2depth페이지 내용1</div>} />
  <Route path="location" element={<div>2depth페이지 내용2</div>} />
</Route>

/about/member으로 들어가면 <About />과 <div>2depth페이지 내용1</div>, 그러니까 부모Route와 해당 자식 Route의 내용을 같이 보여준다.
그래서 부모Route의 내용 컴포넌트 안에 자식 Route의 내용을 어디에 보여줄지 표기해야 한다.

Outlet

Outlet은 위 상황에서 자식 Route의 내용을 어디에 보여줄지 표기할 수 있다.

function About(){
  return (
    <>
    <div className="mt_30">우리 회사는 이런 곳이에요</div>
    <Outlet></Outlet>
    </>
  )
}

어떨 때 쓸까?

내용이 살짝살짝 바뀌는 유사한 페이지들이 필요할 때 쓴다.

---

출처 : 코딩애플 https://codingapple.com/