[react] 라우터 설치 및 적용

설치

yarn add react-router-dom

 

적용

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // 여기추가
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>  // 여기추가
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회할수 있습니다.

 

주소와 컴포넌트 연결

import Main from './components/Main';
import List from './components/List';
import { Route } from 'react-router-dom';
import './App.css';

function App() {
  return (
    <div>
      <Route path="/" component={Main} exact={true} />
      <Route path="/list" component={List} />
    </div>
  );
}

export default App;

 

이렇게하고 브라우저에 url을 입력하면 해당 컴포넌트 페이지로 이동합니다.