[React.js] React Router 적용

1. React Router 설치

npm i react-router-dom

😉 공식 문서 : https://reactrouter.com/en/main

 

2. 프로젝트에 적용

1. BrowserRouter 컴포넌트 적용

// index.jsx
// (생략)
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // BrowserRouter 컴포넌트 적용
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

2. <Routes>, <Route> 컴포넌트 적용

// app.js
// (생략)
import { Link, Route, Routes, useLocation } from "react-router-dom";
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;