[react] react-router-dom

 

react-router-dom이란? 

---

리액트에서 라우팅할 때 사용하는 라이브러리로, URL 주소를 감지하여 다른 페이지를 보여주는 역할을 한다.

 

리액트는 Single Page Application인데 SPA에서는 다른 페이지를 가져오고자 할 때 새로 불러오는 것이 아니라 하나의 페이지 안에서 데이터를 가져온다.

 

설치

 

npm install react-router-dom

 

 

사용

 

이동할 각 페이지 및 컴포넌트를 만든 후 App.js에 BrowserRouter, Routes, Route를 이용해 라우팅해준다.

*6 버전으로 업그레이드하면서 Switch가 Routes로 변경되고, exact옵션이 삭제 되는 등 문법이 바뀌었으므로 버전에 주의하여 사용한다.

 

 

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Page1 from './pages/Page1';
import Page2 from './pages/Page2';

function App() {

  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home></Home>}></Route>
          <Route path='Page1' element={<Page1></Page1>}></Route>
          <Route path='Page2' element={<Page2></Page2>}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

 

 

BrowserRouter

라우터 적용시 <BrowserRouter>컴포넌트를 사용하여 감싸준다.

HTML5의 history API를 활용하여 현재 URL에 맞는 화면(정보)을 보여준다.

 

Routes

<Routes>컴포넌트를 이용해 <Route>컴포넌트를 감싸준다.

 

Route

path에는 주소를, element에는 보여줄 컴포넌트를 넣는다.

 

 

 

 

Link 컴포넌트

---

Route로 경로를 설정했으면 <Link>컴포넌트를 사용해 이동할 수 있다. 

Link 컴포넌트는 <a>태그와 비슷한 기능을 하지만 History API를 통해 URL만 바꾸고 새로 페이지를 불러오지는 않는다. 

<a>태그를 사용하면 새로고침 되기때문에 새로 불러오면서 어플리케이션이 가지고 있던 모든 상태가 날아가게 된다. 따라서 Link컴포넌트를 사용하는 것이 좋다.

 

 

사용

 

<Link to="/Home">홈</Link>