기존의 페이지를 나누는 법은 생html을 여러가지 만드는 것이었다.
근데 리액트에선 하나의 html만 사용하기에 기존의 div를 바꿔서 보여주면 된다.
이를 위해서 라우터를 사용한다.

라우터 설치

우선적으로 외부라이브러리이기에
터미널에서

npm install react-router-dom@6

입력해서 설치해준다.

셋팅은 index.js 파일로 가서

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

App 컴포넌트에 BrowserRouter를 감싸면 끝

라우터로 페이지 나누기

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

<Routes>
	<Route path="/" element={<div> <Header/> <ShoesCard/> </div>}/>
</Routes>

나 같은 경우 메인페이지를 보여주는 라우터이다.

<Route path="/url경로" element={보여줄 html}/> 이렇게 작성해주었다.

페이지 이동

간단하다
위에 코드를 보면 import에 Link를 해두었는데

<Link to="/url주소">어디로 가기</Link>

이렇게 작성해주면 된다.

Link는 별루..

페이지 이동은 Link를 써도 되지만 css도 따로 적용시켜야하고 못생겼다(외모지상주의).
그러니 useNavigate()라는 것을 써보자
이것은 페이지를 이동시켜주는 함수인데
useNavigate("/url")이렇게 하면 가고싶은 url로 이동시켜준다.

한가지 더 말하자면 useNavigate(-1) 뒤로 1번 가기 useNavigate(1) 앞으로 한번 가기 이런 기능으로도 쓸 수 있다.

유저가 이상한 경로를 입력하면?

보통 그럴일 없겠지만 유저가 이상한 url을 작성해서 이동하려하면 없는 페이지를 보여줘야할 때가 있다.
그럴 때 라우터로도 가능한데

<Route path="*" element={보여줄 화면}/>

이렇게 작성해주면 된다.
'*' 경로는 모든 경로를 말하는거라고 생각하자.

nested routes

만약 라우터 안에 또다른 라우터를 보여줘야한다면?

<Route path="/about element={about페이지임}/>

이렇게 about 페이지가 있다고 해보자.
about이라는 url 안에 member와 location이 있으면

<Route path="/about/member element={member페이지}/>
<Route path="/about/location element={location페이지}/>

이렇게 작성할 수 있다.
근데 만약 라우터가 많으면 여러개를 반복적으로 써야하기에 별로다..

<Route path="/about" element={about페이지임}>
  <Route path="member" element={member페이지}/>
  <Route path="location" element={location페이지}/>
</Route>

그래서 about 라우터를 크게 넓혀서 그 안에 member, location 라우터를 작성해주면 좀 더 간편하다.
그러면 /about/member 로 접속 시 member 페이지
그리고 /about/location 로 접속 시 location 페이지를 보여줄 수 있다.

근데 저렇게 하면 아마도 about 페이지만 보일거다.

여기서 한 가지 더 추가해줘야하는데

function 어바웃페이지임(){
	return(
    	<div>
        	<h1>어바웃페이지임</h1>
            <Outlet></Outlet>
        </div>
    )
}

Outlet을 임포트해서 nested routes안의 element들이 어디에 보여줄지 Outlet으로 위치를 잡아주면 된다.

라우터로써 동적인 UI도 만들 수 있고 라우터를 쓰면 뒤로가기 버튼을 이용할 수 있따는 장점이 있다.