React Router Dom

React Router Dom 이란?

리액트를 사용할 때 페이지를 이동할 때 필요한 라이브러리이다.

원래는 A페이지를 보여주고 싶다면 A.html파일을 이용하고 B페이지를 보여주고 싶다면 B.html 파일을 보여주는 방식이었다. 하지만 리액트에서는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.
이것은 SPA(Single Page Application) 이라고 부른다.

 

react-router-dom v6부터는,

• Switch 대신 Routes를 사용
• Route 안에 component 대신 element 사용

 

 

App.js

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  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>

        <hr />

        {/*
          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
        */}
        <Routes>
          <Route exact path="/" element={<LandingPage /> }/>
          <Route exact path="/login" element={<LoginPage /> }/>
          <Route exact path="/register" element={<RegisterPage /> }/>
        </Routes>
        </div>
    </Router>
  );
}

export default App;

페이지 이동이 잘 된다!