React) 라우터

1. 라우터 설치

npm i react-router-dom@5.2.1

 

 

2. BrowserRouter 적용.

BrowserRouter: 웹 브라우저의 주소를 각 컴포넌트에 넘겨주어 현재 어느 주소를 보고있는지 알 수 있다. 

// index.js

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

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

// public/index.html의 id=rootfmf 가진 태그에 렌더링(연결)하겠다는 의미

 

 

 

3. Route로 페이지 컴포넌트 연결

  Route: 주소창과 맞는 컴포넌트를 연결시킨다. 

  exact: 기존의 포함하면 다 보여주는 것이 아닌, 주소와 완전 똑같은것만 보여준다. 

1) react-router-dom을 사용하기 위해 import

2) 연결할 컴포넌트들을 import

3) <Route>로 컴포넌트 연결.

// App.js

import {Route} from "react-router-dom";
import Home from "./Home";
import Page2 from "./Page2";

function App() {
  return (
    <div>
      <Route path="/" exact>
        <Home data={"Hi"}/>		
      </Route>
      <Route path="/page2" component={Page2}></Route>
    </div>
  );
}

Home의 경우, <Home>태그 형식으로 연결하고 "Hi"라는 데이터를 넘기고 있다. 

Page2의 경우, component={Page2} 형식으로 연결했는데 두 방법 다 상관없이 가능하다.