[React Router] react-router-dom

개발을 진행하면서 만들어지는 수많은 페이지들을 효율적으로 관리하는 방법에 대해 알아보자

이번 글에서는  react-router-dom을 사용한 Basic Routing을 해 볼 것이다.

예제는 링크를 사용한 간한단 이력서 폼이다.

간단한 예제이므로 파일을 따로 구분하지 않고 하나의 파일에서 작성해 보자

 

react-router-dom에서 사용할 컴포넌트는 다음과 같다

① BrowserRouter

② Route

③ Switch

④ Link

⑤ Reidrect

 

App.js

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

// App 컴포넌트
const App = () => {
  return (
    <BrowserRouter>
      <h1>Resume</h1>
      {/* 각각의 링크를 클릭할때 경로를 설정해 줌으로써 아래의 라우팅에서 컴포넌트 호출 */}
      <ul>
        <li>
          <Link to="about">about</Link>
        </li>
        <li>
          <Link to="skills">skills</Link>
        </li>
        <li>
          <Link to="projects">projects</Link>
        </li>
      </ul>

      {/* 라우팅 */}
      <Switch>
        <Route exact path="/about" component={About} />
        <Route exact path="/skills" component={Skills} />
        <Route exact path="/projects" component={Projects} />
        <Route path="/" render={() => <Redirect to="about" />} />
      </Switch>
    </BrowserRouter>
  );
};

// 기타 컴포넌트들
const About = () => <div>This is About Component</div>;
const Skills = () => <div>This is Skills Component</div>;
const Projects = () => <div>This is Projects Component</div>;

export default App;

 

동작되는 화면은 다음과 같다

링크를 클릭할 때마다 url 경로가 변경되고 컴포넌트가 변경되는 것을 확인할 수 있다.