라우팅이란
- 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것
- 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기위한 시스템
- 설치모듈
yarn add react-router-dom
프로젝트에 적용
1. index.js
- react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싼다.
- HTML5의 History API를 사용하여 페이지를 새로 불러오지 않고도 주소변경 가능하게 한다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
2. 페이지 이동시 App.js에 작성
- 모든 이동 경로를 App.js에서 관리할경우 전부 작성
import Mypage from "./pages/Mypage";
import Account from "./pages/Account";
<Routes>
<Route path="/*" element={<Main/>}>
<Route path="mypage" element={<Mypage />}></Route>
<Route path="account" element={<Account />}></Route>
</Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
3. 다른페이지로 이동원하는 링크 만들기
- Link로 이동원하는 링크 만들기
ㄴ 페이지를 새로 불러오는것을 막고 History API를 통해 브라우저의 주소 경로만 바꾼다.
- Route의 path와 Link의 to는 동일한 역할(링크이동)
- Route와 Link는 짝꿍
- Link는 주소 이동만 될뿐 컴포넌트를 보여주기 위해선 Route를 꼭 같이 써주거나 Outlet사용
import { Link, Outlet} from "react-router-dom";
<Link to="/mypage">
<button>마이페이지</button>
</Link>
<Link to="/account">
<butotn>계정관리</butotn>
</Link>
<Outlet />
import { Outlet } from "react-router-dom";
<Outlet />