boiler-plate : react-router-dom에 대한 정리

이 내용은 이미 필자가 많이 알고 있어서 조금 간략하게 정리하고 넘어가려고 한다.

자세한 내용은 다른 블로그를 참고하시길 바라며 추가적으로 또 무언가 알게 될 경우 업데이트를 할 예정이다.

 

 

 

라우터 관리를 좀 더 편리하기 위해 라이브러리를 설치한다.

yarn add react-router-dom

react-router-dom을 import를 한 후 다음과 같은 코드를 작성한다.

// client > src > App.js
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import LandingPage from './components/views/LandingPage/LandingPage';
import LoginPage from './components/views/LoginPage/LoginPage';
import RegisterPage from './components/views/RegisterPage/RegisterPage';

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <LandingPage />
          </Route>
          <Route path="/login">
            <LoginPage />
          </Route>
          <Route path="/register">
            <RegisterPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

이 보다 조금더 깔끔하고 간단한 코드는 아래와 같다.

// client > src > App.js

// 이하 생략

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Router 안에 있는 exact이 붙으면 주어진 경로와 정확하게 입력해야지만 설정한 컴포넌트를 보여준다는 의미이다.

 

 

 

오늘의 코드 바로가기