[React] Router

1. React Router 설치

 

💾 React Router 설치 명령어

 

npm install react-router-dom

 

VS Code의 터미널에서 리액트 프로젝트 폴더 경로로 이동한 후 해당 명령어를 통해 설치한다.

 

 

---

 

2. React Router 정의

 

  리액트 라우터는 리액트 애플리케이션에서 라우팅을 쉽게 할 수 있도록 도와주는 라이브러리로

URL을 통해 서로 다른 컴포넌트(페이지)를 렌더링할 수 있다.

 

1) Routes & Route

Routes : 여러 개의 Route를 감싸는 컴포넌트로 Route들을 관리

Route : URL 경로와 해당 경로에 매핑되는 컴포넌트를 정의

-> 컴포넌트에 주소값을 부여

 

2) Link

Link : 다른 페이지로 이동할 수 있는 링크를 만들 때 사용

<a> 태그와 비슷하지만 페이지를 새로고침하지 않고 라우팅 처리 가능

 

3) BrowserRouter

HTML5 History API를 사용하여 URL을 관리하는 라우터

애플리케이션의 최상단에 위치하여 라우팅을 관리한다. 

-> 주소값에 따른 기능을 사용할 수 있게 만들어 준다.

 

❗ Router를 사용하려면 꼭 반드시 <BrowserRouter> 태그로 최상단 위치에서 감싸줘야한다.

 

 

---

 

3. React Router 사용법

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

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

reportWebVitals();