React - Router1

리액트 라우터는 여러 페이지를 만들고 싶을 때 사용합니다. 이에 대해서 공부해보겠습니다.

 

 

1️⃣  설치하기

 

리액트 라우터를 사용하기 위해서는 react-router-dom이라는 공식 라이브러리를 설치해야합니다. 

 

yarn add react-router-dom@5  -> yarn이 설치되어 있는 경우

npm install react-router-dom@5 -> yarn이 설치가 안 되어 있는 경우

 

이렇게 터미널에 입력해주면 react-router-dom이라는 라이브러리가 설치가 됩니다.

 

 

그리고 나서 이제 index.js 파일에 가서 다음과 같이 입력해줘야 합니다.

 

import { BrowserRouter } from 'react-router-dom';

 

그리고 ReactDom.render 부분도 다음과 같이 수정을 해줍니다.

 

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
  document.getElementById('root')
);

 

<BrowseRouter></BrowserRouter> 안에 <App />을 넣어주면 됩니다. 여기까지 하면 일단 라우팅 할 준비가 끝났습니다.

 

 

2️⃣  라우팅 하기

 

① 라우팅하기 위해선 첫째로 몇 가지 태그들을 import 해줘야 합니다. App.js 파일 위에 다음과 같은 코드를 입력해줍시다.

 

import { Link, Route, Switch } from 'react-router-dom';

 

② 라우팅 하고 싶은 곳에 <Route></Route> 태그를 열어줍니다. 

 

③ <Route> 안에 path와 보여주고 싶은 HTML을 넣어줍니다.

 

function App() {
  return (
    <Route path="/">
      <div>라우팅입니다.</div>
    </Route>
  )  
}

 

위와 같이 입력하면 주소창에 / 을 입력하면 '라우팅입니다' 라는 글자가 보입니다. 다른 페이지를 만들고 싶다면 동일한 방법으로 path를 다르게 해서 해주면 됩니다.