클라이언트의 요청의(URL) 변경에 따라 페이지, 컴포넌트의 변화를 제공하기 위한 라이브러리

설치

cd cliend -> npm install react-router-dom --save

적용

App.js

import logo from './logo.svg';
import './App.css';
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>
        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
      	  //시작 페이지
          <Route exact path="/" component={LandingPage}/> 
          //로그인 페이지 이동
		  <Route exact path="/login" component={LoginPage}/>
          //회원가입 페이지 이동
          <Route exact path="/register" component={RegisterPage}/>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

React Router DOM을 이용해 URL 요청에 따라 컴포넌트를 호출

확인

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본