react-router-dom

html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다.
이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부른다.

react-router-dom

주소에 맞는 컴포넌트를 렌더링 해주는 라이브러리

설치

yarn add react-router-dom

사용법

1. BrowserRouter

• HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기화를 유지해준다.
• 라우팅 관련 컴포넌트들의 최상단에 위치해 있어야 한다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

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

2. Route

• path로 지정한 주소일 때, 지정한 컴포넌트를 보여준다.

사용법1

<Route path="/" exact>
	<Home></Home>
</Route>

사용법2

// App.js
<Route path="/cat" component={Cat} />

이 경우, history객체를 사용 할 수 있다.

// Cat.js
const Cat = (props) => {
  console.log(props);
  return (
    <div
      onClick={() => {
        props.history.push("/dog");
      }}
    >
      Cat
    </div>
  );
};

export default Cat;

3. Link

• html에서 a태그와 비슷하다.

<Link to="/">메인으로 가기</Link>
<Link to="/dog">dog로 가기</Link>

<Route path="/">
	<Home></Home>
</Route>
<Route path="/dog">
    <Dog></Dog>
</Route>

home으로 가기 링크를 누르면 내가 지정한 컴포넌트가 나온다.
그런데 dog로 가기 링크를 누르면

home컴포넌트도 같이 나온다.
왜냐하면 /dog라는 주소에는 /가 속해 있기 때문이다.
그럴 때는 exact를 사용한다.

<Link to="/">메인으로 가기</Link>
<Link to="/dog">dog로 가기</Link>

<Route path="/" exact>
	<Home></Home>
</Route>
<Route path="/dog">
    <Dog></Dog>
</Route>

정확히 주소가 일치하는 컴포넌트만 보여준다.

4. Switch

• Switch가 감싸준 Route들 중에 Route path와 일치하는
  첫 번째 컴포넌트만을 라우팅 해준다.

<Switch>
 <Route path="/">
  <Home></Home>
 </Route>

 <Route path="/cat" component={Cat} />

 <Route path="/dog">
   <Dog></Dog>
 </Route>
</Switch>

그런데 주소가 /cat인데도 home컴포넌트를 보여주고 있다.
이럴 땐 path가 /인 라우트에 exact를 적용 하면 된다.

Switch의 또 다른 사용법은
사용자가 지정된 주소 이외의 주소로 들어 왔을 때 사용할 수 있다.

<Switch>
 <Route path="/" exact>
  <Home></Home>
 </Route>

 <Route path="/cat" component={Cat} />
            
 <Route path="/dog">
  <Dog></Dog>
 </Route>

 <Route>
  <NotFound></NotFound>
 </Route>
</Switch>