라우팅 (페이지 전환)

1️⃣ 라우팅 설치

npm add react-router-dom

---

2️⃣ 기본 사용법

// main.tsx
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import React from 'react'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

// pages/HomePage.tsx
function HomePage() {
    return <h1>홈 페이지</h1>
}

export default HomePage;

// pages/AboutPage.tsx
function AboutPage() {
    return <h1>소개 페이지</h1>
}

export default AboutPage;

// App.tsx
import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import Header from "./components/Header";

function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </>
  );
}

export default App;

---

3️⃣ 페이지 간 이동하기: Link

// components/Header.tsx
import { Link } from "react-router-dom";

function Header() {
    return (
        <nav>
            <Link to="/">홈</Link> | <Link to="/about">소개</Link>
        </nav>
    );
}

export default Header;

---

---

🚀 핵심 요약

항목	설명
BrowserRouter	라우팅을 위한 최상단 컴포넌트
Routes / Route	페이지 매칭 & 렌더링
Link	페이지 이동 시 새로고침 없이 전환