[PJ] BrowserRouter, Routes,Route 간단 정리

 

 

 

프론트 엔드에서 vue,js를 사용하든 리액트를 사용하든 페이지 이동을 하기 위해서 리액트 라우터를 사용한다.

라우팅은 무엇이길래? 이걸 사용할까 

요청 url에 따라 해당 url에 맞는 페이지를 보여주는 것 

리액트는 기존 mpa방식의 웹페이지가 아닌 spa이기 때문에 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다.

그렇기 때문에 url에 따라 선택된 데이터를 페이지에 렌더링 해주는 것이다. 

 

BrowserRouter

HTML5의 HistoryAPI를 사용해 UI를 동기화 해줌 

URL 을 직접 조작하면서도 페이지 전체를 리로드 하지 않는 SPA구현 가능 

 

Routes 

Routes컴포넌트를 사용해 여러 route를 감싸줌

경로 일치의 명시성을 높여줌 

 

Route

각 Route는 path와 element 두 개의 속성을 가짐 

element속성에는 렌더링할 컴포넌트를 JSX형태로 전달 

 

 

라우터 설정 & 사용법 

yarn add react-router-dom

 

 

APP.JS에 BrowserRouter, Route, Routes 모두 import 하기

그리고 Route를 Routes로 묶어주고, 이 둘을 모두 BrowserRouter로 묶어준다.

 

 

import { BrowserRouter, Routes,Route } from "react-router-dom"
import HomePage from "@pages/Home"
import TestPage from "@pages/Text"
function App() {
 

  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" Component={HomePage}/>
          <Route path="/test" Component={TestPage}/>
      </Routes>
    </BrowserRouter>
  )
}

export default App