Route/Link/Outlet

라우팅이란

• 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것
• 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기위한 시스템

1. 설치모듈

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 />