React Router Dom

리액트에서는 페이지 이동을 할 때 React Router Dom을 사용한다.

// React Router Dom 설치
npm install react-router-dom --save

// 사용 예시
import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
		
        {/* Switch는 더이상 지원 안함 -> Routes 사용 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
        
      </div>
    </Router>
  );
}

// You can think of these components as "pages" in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

위의 예시 코드를 보면 상단에 간단한 네비게이션 바(페이지 리스트)를 보여주고 path를 지정해 코드 하단에 있는 페이지들을 보여주도록 되어 있다. 

실제 개발을 할 때는 페이지들을 따로 파일로 만들어 저장하기 때문에 다른 파일에서 작성한 뒤 import 해주면 된다.

// 페이지 import 예시
import LanDingPage from "./components/views/LandingPage/LandingPage";