React Router - SPA에서 다른 페이지 전환

React Router

React 애플리케이션에서 클라이언트 측 라우팅을 쉽게 구현할 수 있도록 도와주는 라이브러리

페이지 리로드 없이 URL을 변경하거나, 사용자가 방문한 URL에 따라 서로 다른 컴포넌트를 렌더링하는 기능을 제공

글 페이지 애플리케이션(SPA)에서 페이지 전환을 구현하는데 주로 사용

 

설치 명령어

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

 

예시

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// 각 페이지 컴포넌트 정의
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

function App() {
  return (
  {/* 네비게이션 바 */}
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

    {/* 페이지 경로 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

 

• BrowserRouter: 전체 애플리케이션을 감싸서 브라우저 히스토리를 관리
• Routes: 여러 Route를 감싸서 URL 경로에 따라 어떤 컴포넌트를 렌더링할지 결정 (Route Container)
• Route: 각 경로에 맞는 컴포넌트를 지정
• Link: 사용자가 특정 경로로 이동할 수 있도록 링크를 제공