[React] Router

React Router

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 사용합니다.

 

React Router는 주로 SPA에서 여러 화면을 보여줄 때 사용합니다.

 

Routing(라우팅) : 경로에 따라 변경한다.

// ReactRouter 라이브러리  |     역할
     <BrowserRouter>       |  Router 역할
     <Routes>              |  <Route>의 묶음
     <Route>               |  경로를 매칭해주는 역할
     <Link>                |  경로를 변경하는 역할

반응형

# React Router 설치하기
npm install react-router-dom

// example
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">Mypage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
    
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<Mypage />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

---

 

 

React Router를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.