Router

React Router

• SPA (Single Page Application)
  페이지가 한개인 애플리케이션
  React의 html 파일 갯수는 index.html 1개이다.
  즉, React는 SPA이다.
  이전에 만든 작업들을 생각해본다면 login.html main.html 등 여러개의 html 페이지로 관리했다. 이걸 MPA (Multi Page Application)이라고 한다. SPA와 반대되는 개념이다.

Routing

한개의 페이지 안에서 여러개의 페이지를 보여주는 방법이다.
다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다.
React자체에 이런 기능이 내장되어 있지 않다.

React Router

React Routing기능을 위해 가장 많이 사용 되는 라이브러리이다.

import는 필수!

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Longin/Login';
import Main from './pages/Main/Main';

const Router = () => {
    return(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Login />} />
            <Route path="/main" element={<Main />} />
        </Routes>
      </BrowserRouter>
    )
}

export default Router;

path="/" 는 디폴트 값으로 http://localhost:3000/을 의미