React Router v6
React에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

1. Path Variable - useParams

App.js

import "./App.css";

import { BrowserRouter, Route, Routes } from "react-router-dom";

import RouteTest from "./components/RouteTest";

import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary/:id" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

Diary.js

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

const Diary = () => {
  // useParams를 이용하면 전달받아서 들어오게 되는 path variable (id)들을 모아서 객체로 갖다 주게 됨
  const { id } = useParams();
  console.log(id);

  return (
    <div>
      <h1>Diary</h1>
      <p>이곳은 일기 상세 페이지 입니다</p>
    </div>
  );
};

export default Diary;

2. Query String - useSearchParams

Edit.js

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

const Edit = () => {
  // searchParams와 setSearchParams로 전달 받을 수 있는 배열을 반환
  // searchParams는 get을 통해서 전달받은 쿼리 스트링들을 꺼내서 쓸 수 있는 용도로 사용 가능
  // setSearchParams는 searchparams를 변경하는 역할 => 쿼리 스트링을 바꿀 수 있음
  // 이름은 자유롭게 변경 가능
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  console.log("id : ", id);

  const mode = searchParams.get("mode");
  console.log("mode : ", mode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정 작성 페이지 입니다</p>
      <button onClick={() => setSearchParams({ who: "taejukim" })}>
        QS 바꾸기
      </button>
    </div>
  );
};

export default Edit;

3. Page Moving - useNavigate

import { useNavigate, useSearchParams } from "react-router-dom";

const Edit = () => {
  // 페이지를 이동시킬 수 있는 함수를 하나 반환
  const navigate = useNavigate();

  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  console.log("id : ", id);

  const mode = searchParams.get("mode");
  console.log("mode : ", mode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정 작성 페이지 입니다</p>
      <button onClick={() => setSearchParams({ who: "taejukim" })}>
        QS 바꾸기
      </button>

      <button
        onClick={() => {
          navigate("/home");
        }}
      >
        home으로 가기
      </button>

      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로가기
      </button>
    </div>
  );
};

export default Edit;