React-Router 간단한 예제

리액트 라우터 버전 5일때

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

const PageOne = () => {
  return <div> PageOne</div>;
};

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <button>click me</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo" exact component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

저렇게 exact 꼭 붙여줘야 한다.
한붙여주면 /pagetwo가 /도 contain하기 때문에 둘이 같이 나오게 된다.
참고로 리액트 라우터에서는 html에서 하듯이 a 태그로 해주면 안된다.
그 이유는 a태그로 해서 클릭하면 브라우저가 request를 하고
그럼 server가 index.html파일과 함께 응답을 한다.
그럼 브라우저가 index.html파일을 받는데 그때 예전에 가지고 있던
html를 다 버린다.심지어 자바스크립트 파일들이랑 react state 데이터도
다 같이 버린다. 그리고 다시 빈공간에 새로운걸 보여주게 된다.
근데 이렇게 되면 이미 받아놓은 api파일같은 이런것도 다 싹사라지고
다시 받아야 하기 때문에 이렇게 안쓴다고 한다.
그럼 어떻게 해야하냐면

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

const PageOne = () => {
  return (
    <div>
      <Link to="/pagetwo">Navigate to Page Two</Link>
    </div>
  );
};

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <button>click me</button>
      <Link to="/">Navigate to Page One</Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo" exact component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

이런식으로 Link import받아서 넣어주면 된다.
이렇게하면 라우터가 브라우저가 전체 html를 갖다 버리는걸 막아주게 되서
새롭게 데이터 안받아도 페이지만 바뀐다.