따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #20 React Router Dom

React-router-dom 설치

C:\practices\react-node\boiler-plate> cd client
C:\practices\react-node\boiler-plate\client> npm install react-router-dom

 

[App.js]

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';


export default 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>
  );
}

 

Route는 이렇게 쓸 수 있지만 위에 처럼  한줄로 줄여 쓸 수도 있다.

<Route path='/>
	<LandingPage />
</Route>

 

exact는 path의 경로값과 정확히 일치할 경우에만 렌더링 되게 한다.