react router 예전버전 react-router-dom@5.1

react-router-dom 라이브러리를 사용하여 React 프로젝트에 라우팅을 구현하는 방법을 알아보자.

1. 라이브러리 설치

먼저, react-router-dom@5.1을 설치한다.

npm install react-router-dom@5.1

2. BrowserRouter, Route, Switch, NavLink 라이브러리

App.js 파일에서 라우팅을 위한 라이브러리를 불러온다.

App.js 위에
import { BrowserRouter, Route} from 'react-router-dom'

3. BrowserRouter로 컴포넌트 감싸주기

BrowserRouter로 전체 컴포넌트를 감싸준다.

import "./App.css";
import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <h1>My Articles</h1>
        </nav>
      </BrowserRouter>
    </div>
  );
}

export default App;

4. Route로 각 페이지 컴포넌트 연결하기

각 페이지 컴포넌트를 불러온 다음, 각각의 Route 컴포넌트를 사용하여 경로와 매핑한다.

import "./App.css";
import { BrowserRouter, Route } from "react-router-dom";

// page components
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <h1>My Articles</h1>
        </nav>

        <Route path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

5. 페이지 중복 표시 문제 해결하기

4번까지만 하면 화면에서 다른 path로 갔을때 아래와 같이 home화면도 같이 나오는 현상이 발생한다.

이렇게 나오지 않고 하나만 나오게 해주려고 switch를 써주게 되는데, 쓰는 방법은 아래와 같다.

import "./App.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";

// page components
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <h1>My Articles</h1>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

• Routes들을 Switch로 감싸준다.
  근데 여기서 꼭 기억해야할게 exact라고 props를 넣어줘야 하는것이다.
  이렇게 안넣으면 Switch가 작동은 하는데 다 Home path만 나오게 된다.
  그 이유는 다른 애들도 다 /를 포함하고 있기 때문이다.
  그래서 exact을 넣어줘서 아예 똑같을 때만 작동되게 해줘야한다!

6. 네비게이션 링크 설정하기

NavLink 컴포넌트를 사용하여 각 페이지로 이동할 수 있는 네비게이션 링크를 생성한다.

만약 위의 nav에 이렇게 링크를 걸어주게 되면,

 <nav>
    <h1>My Articles</h1>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
 </nav>

작동은 잘 하지만 리액트에서는 이렇게 해주면 안된다.
이렇게 되면 링크 누를때마다 서버에 request 되기 때문에 계속 페이지가 새로고침 되기 때문이다. 이런 이유로 이렇게 링크 거는 대신 Link를 써준다.

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

이렇게 import에 추가해주고
아까 nav에 있던 저부분을

 <nav>
          <h1>My Articles</h1>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
 </nav>

이렇게 바꿔줄 수 있다. 근데 여기서 Link를 NavLink로 다 바꿔줄수도 있다.
네비게이션에 있는 링크일때는 NavLink로 쓴다.
이런 이유로 2번에서 NavLink 라이브러리를 불러온 것이다.

완성된 코드

import "./App.css";
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";

// page components
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <h1>My Articles</h1>
          <NavLink exact to="/">
            Home
          </NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/contact">Contact</NavLink>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;