1. 프로젝트 준비 및 기본적인 사용법

시작하기
react-router-dom 설치

1. BrowserRouter로 감싸기

//index.js
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

2. 페이지 만들고 Route: 특정 주소에 컴포넌트 연결하기

//App.js
import React from "react";
import { Route, Routes } from "react-router-dom";
import About from "./About"; //About 페이지 만들고 import
import Home from "./Home"; //Home 페이지 만들고 import

const App = () => {
  return (
    <div>
      <Routes> //Routes로 감싸기
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

3. Link: 누르면 다른 주소로 이동시키기

import React from "react";
import { Route, Routes, Link } from "react-router-dom";
import About from "./About"; //About 페이지 만들고 import
import Home from "./Home"; //Home 페이지 만들고 import

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <Routes> //Routes로 감싸기
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

2. 파라미터와 쿼리

페이지 주소를 정의 할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다.

파라미터: /profiles/username
쿼리: /about?details=true

일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용됩니다.

useParams

import { Route, Routes } from "react-router-dom";
import Profile from "./Profile";

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/profiles/:username" element={<Profile />} />
      </Routes>
    </div>
  );
};

import React from "react";
import { useParams } from "react-router-dom";

const Profile = () => {
  const { username } = useParams();
  return <div>{username}님 안녕하세요!</div>;
}; 
// 경로 .../profiles/hyebin에서 {username}은 hyebin

export default Profile;

useLocation

//About.js
//경로: .../about?detail=true

import { useLocation } from "react-router-dom";

const About = () => {
  const location = useLocation();

  return (
    <div>
      <div>{location.pathname}</div> // /about
      <div>{location.search}</div>  // ?detail=true
      <p>About 페이지</p>
    </div>
  );
};