react-router-dom

🌻 React Router 개념

• 리액트 라우터란?
  • 사용자가 입력한 주소를 감지하는 역할로 사용자가 요청한 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리
  • MPA 방식에서는 여러 페이지를 분리해두고 페이지 간의 이동으로 이 라우트 시스템을 구축을 하지만, 그러나 SPA 방식의 리액트에서 라우트 시스템을 구축하기위해 React Router를 사용
• 라우터 컴포넌트
  • BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지
  • HashRouter: 해시 주소를 감지
  • MemoryRouter: 메모리에 저장된 이전, 이후 주소로 이동시키는 라우터
  • NativeRouter: 리액트 네이티브를 지원하는 라우터
  • StaticRouter: 브라우저의 주소가 아닌 프로퍼티로 전달된 주소를 사용하는 라우터

🌻사용하기

1. 설치

npm install react-router-dom --save

2. 적용하기

App.js

import React from "react";
import { Route, Routes, BrowserRouter } from "react-router-dom";
import LoginPage from "./Components/views/LoginPage/LoginPage";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• 최상단 <BrowserRouter>태그로 감싸기
• <Routes> : 여러 Route를 감싸서 그 중에서 해당되는 Route를 렌더링 해주는 역할
• <Route> : path 속성에는 경로를 element 속성에는 보여주고 싶은 컴포넌트를 넣어주면됨

3. Link를 이용한 이동

• 리액트 라우터를 사용하는 컴포넌트에서는 Link를 사용해야 함
• a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문
• Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음

<Link to="경로">링크 이름 </Link>