[React]Router란?

#1 Router란?

Router : 리액트 라우터(React Router) 는 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter과 HashRouter이다.

BrowserRouter : HTML5 이상을 지원하는 브라우저의 주소를 감지한다.
HashRouter : 해시 주소(http://...)를 감지한다.

#2 설치방법

터미널에서 리액트 라우터를 설치하고싶은 폴더로 이동한후
npm install react-router-dom을 입력하여 설치할수 있다.

#3 사용 예시

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './pages/Main/Main'; //라우터에 들어갈 페이지들을 임폴트
import Login from './pages/Login/Login'; //라우터에 들어갈 페이지들을 임폴트

//Router.js의 기본 구조
function Router() {
  return (
    <BrowserRouter> //BrowserRouter를 사용 할 것이기 떄문에, <BrowserRouter>태그로 컴포넌트를 감싸주자.
      <Routes> //<Routes>컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
        <Route path="/" element={<Login />} />   //<Route>는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.
        <Route path="/main" element={<Main />} /> //라우터로 연결할 페이지들
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

위의 코드가 Router.js파일의 기본적인 구조이다.(직접 작성해야함) Router.js의 내용을 작성한후 npm start 명령어를 사용하여 프로젝트를 시작한후 주소창의 (예시 : /main) 입력시 매인페이지로 이동 합니다.

#4 Link 컴포넌트 사용하기

웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용한다. 하지만a태그는 클릭시 페이지를 새로 불러오기때문에 사용하지 않는다. Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

//문법
import { Link } from 'react-router-dom';
<Link to="경로">"링크명"</Link>

위처럼 Link컴포넌트를 사용하면 웹사이트에서 외부사이트로 이동하지않고 브라우저 주소의 경로만 바꿀수 있다.

#5 useNavigate

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다. replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.

위의 코드처럼 useNavigate 를사용하여 Link컴포넌트를 사용하지않고 페이지를 이동하는 코드를 작성할수도 있다