[React] Router

Router란?

리액트 컴포넌트로 페이지를 나누고 이동하게 해주는 라이브러리이다.

 

우리가 리액트를 사용하다보면 router, routes, route, link

이렇게 네가지 컴포넌트가 있는걸 볼 수 있었다.

그럼 각각 어떤 역할을 하는지 알아보자.

 

Router

라우터는 리액트 라우터에서 사용하는 데이터들을 모두 가지고 있는 컴포넌트다.

(현재주소나, 페이지기록을 가지고 있음)

이게 없으면 리액트 라우터를 쓸 수 없다.(중요!!)

그래서 리액트 라우터에서 제공하는 기능을 사용하려면 

반드시 라우터컴포넌트 안에서 사용해야한다.

보통은 최상위 컴포넌트로 감싸고 사용하는데

이렇게하면 프로젝트 전체에서 리액트 라우터를 쓸 수 있기때문이다.

 

📌예시

import { BrowserRoute } from "react-router-dom";

function Main() {
  return (
    <BrowserRouter>
    ......
    </BrowserRouter>
  );
}

export default Main;

 

 

Routes, Route

두 컴포넌트는 주로 같이 사용한다.

간단하게 자바스크립트의 swich문이라고 생각하면 쉬운데..

routes 컴포넌트 안에서 route 컴포넌트로 경로와 보여질 컴포넌트를 지정해주면 된다.

예를들어 사용자가 naver 라는 경로로 들어왔을 때 차례대로 내려가면서 

네이버라는 경로를 찾으면 그 안에있는 컴포넌트를 보여주는 것이다.

 

📌예시

<Routes>
  <Route path="goole" element={<GoolePage />} />
  <Route path="yahoo" element={<YahooPage />} />
  <Route path="naver" element={<NaverPage />} />
</Routes>;

 

 

Link

링크컴포넌트는 매우쉽다. 리액트 라우터에서 a태그대신 사용한다.

to프롭을 활용하여 이동경로를 적어주면 끝~

 

📌예시

<Link to="/">홈페이지</Link>
<Link to="/class">수업</Link>
<Link to="/questions">커뮤니티</Link>

 

결론,
React-Router를 사용하면 여러페이지를 나누고 이동하는걸 컴포넌트로 할 수 있다는게 핵심임