[React] Router

 

터미널에서 라우터 설치

npm install react-router-dom

 

index.js에서 import 하고 

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

아래와 같이 BrowserRouter로 App을 감싸준다.

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

 

 

HashRouter를 쓰면 /#/ 로 전송되고 그 데이터는 서버에 전송되지 않음

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

 

App.js에서 import

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

 

그리고 아래와 같이 추가하고

      <Route path="/">
        <div>메인</div>
      </Route>

      <Route path="/test">
        <div>test</div>
      </Route>

 

localhost:3000/ 로 접속하면

 

 

localhost:3000/test로 접속하면

이렇게 나온다.

 

아래에서 메인과 test가 다 나오는이유 - 겹치는 부분을 다 보여준다. 

정확히 일치하는 것만 나오게 하려면

      <Route exact path="/">
        <div>메인</div>
      </Route>

      <Route exact path="/test">
        <div>test</div>
      </Route>

이렇게 쓰면 됨