[React] React Router Dom

페이지 간 이동할 때 react router dom을 사용함
우선 이걸 사용하려면 설치가 필요함

npm install react-router-dom --save

 

// index.js

import './App.css';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} 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>
        <Routes>
          <Route exact path="/" element={ <LandingPage /> } />
          <Route exact path="/login" element={ <LoginPage /> } />
          <Route exact path="/register" element={ <RegisterPage /> } />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

이렇게 하면 랜딩페이지, 로그인페이지, 레지스터 페이지 화면이 뜬다
강의 상에는 router 대신 switch가 사용되었지만 그 문법은 v5 버전이기에 router로 수정해주었고,

element={ <LandingPage /> }

이 부분도 < /> 꺽쇠를 추가해주었다

<Route exact path="/" element={ <LandingPage /> } />

이 부분에서 exact가 뭐냐면
localhost:3000/user와 localhost:3000/user/create가 있다고 하자
exact가 없다면 router가 부분적으로만 닮아도 같은거라고 인식해버리기에 createuser 컴포넌트로 가야함에도 둘 다 user컴포넌트로 이동한다 그걸 방지하기 위해 부분적인 것만 닮아도 같은 것이라고 인식하는 부분을 없애기 위해서 넣어준다