[React.js] React Router 적용

1. React Router 설치

npm i react-router

2. 프로젝트에 적용

1. BrowserRouter 컴포넌트 적용

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./app";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. , 컴포넌트 적용

// app.js
// (생략)
import { Link, Route, Routes, useLocation } from "react-router";
import PageA from "./PageA"; // 이동할 페이지 컴포넌트
import PageB from "./PageB"; // 이동할 페이지 컴포넌트
import Home from "./Home"; // 이동할 페이지 컴포넌트

export default function App() {
  const { pathname } = useLocation(); // pathname으로 현재 경로 정보 확인

  // <Routes> 컴포넌트는 해당되는 Route를 렌더링함
  // <Route> 컴포넌트의 path 속성에 경로, element 속성에 렌더링할 컴포넌트 작성함
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/page1">Page 1</Link>
          </li>
          <li>
            <Link to="/page2">Page 2</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<PageA />} />
        <Route path="/page2" element={<PageB />} />
      </Routes>
    </div>
  );
}

😉 useLocation()의 pathname을 이용해 현재 경로 정보를 이용할 수 있다.

3. a태그 대신 Link 컴포넌트 사용

// PageA.js
import React from "react";
import { Link } from "react-router-dom";

const PageA = () => {
  return (
    <div>
      <h1>PageA</h1>
      <Link to="/">Home</Link>
    </div>
  );
};

export default PageA;

---

2025-04-25 추가
공식문서의 DECLARATIVE MODE(https://reactrouter.com/start/declarative/installation)를 참고하면 최신 사용법을 확인할 수 있다.