리액트 라우터 설치 & 적용

 

0. 필요한 패키지 찾는법

npm

- 위 사이트에서 필요한 패키지를 검색해보자

- 보통 상위에 노출되는 것을 사용하면 된다.

- npm을 이용하여 설치하는 방법이 나와있다.

- 자신이 yarn을 이용한다면 패키지 이름만 가져오면 된다.

 

1. react-route-dom 패키지 설치 후 공식문서 확인

yarn add react-router-dom

- 공식문서 확인을 통해 사용 방법을 알아본다.

- 구글검색 / npm 홈페이지 등 공식문서와 연결해준다.

- 아래는 react router dom의 공식문서이다.

React Router: Declarative Routing for React

 

- 예시코드에서 사용방법이 모르겠다면, 모든 API가 설명이 되어있으니 찾아보면 된다.

 

2. 패키지 import

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

 

3. Browser Router 사용해보기 (기본 코드)

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

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

- 공식문서 코드