[React] 라우팅 방법 버전 6 및 유용한 기능

라우터 설치

dom뒤에 @6는 라우터의 버전을 의미한다.

React route 참고서 https://reactrouter.com/en/main/start/tutorial#setup

Tutorial v6.11.0

 

BrowserRouter 사용 방법 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";

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

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" element={<Diary />} />
        </Routes>
        <a href="/new">New로 이동</a>
      </div>
    </BrowserRouter>
  );
}

export default App;

<BrowserRouter> 태그 안에 <Routes> 태그로 url을 작성하고 url에 따라서 routes 안의 해당 부분만 리렌더링 된다.

url 예시 - http://localhost:3000/Home

 

Router 링크 작성 방법

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";

import RouteTest from "./components/RouteTest";

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

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" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

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

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>Diary</Link>
      <br />
      <Link to={"/new"}>New</Link>
      <br />
      <Link to={"/edit"}>Edit</Link>
    </>
  );
};

export default RouteTest;

React는 spa이기 때문에  <a> 테그를 사용하여 페이지이동을 하는 경우는 거의 없으며 <a> 태그를 대신해서

<Link to = {"/"}> 테그를 사용하여 url에 맞게 해당 구역만 리렌더링 한다.

 

React Router Dom v6의 유용한 기능

React에서 csr기반 페이징 라우팅을 원활하게 해주는 라이브러리

 

1.Path Variable

 - useParams

ex) id를 전달 받은 path variable

<Route path="diary/:id" element={<Diary />} /> // url 별도 정의

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

const Diary = () => {
  const { id } = useParams();
  console.log("전달 받은 path variable = ",id);

  return (
    <div>
      <h1></h1>
      <p>이곳은 다이어리입니다.</p>
    </div>
  );
};
export default Diary;

2. Query String (웹 페이지에 데이터를 전달하는 가장 간단한 방법)

 - useSearchParams

Path Variable과 다르게 Query string은 별도의 다른 정의가 필요 없다.

정의를 따로 하지 않기 때문에 중간에 다른 url을 기입해도 가능.

ex) /edit?id=999999&mode=dark (&의 의미는 다른 변수를 보내겠다는 뜻) 

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

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const mode = searchParams.get("mode");
  const who = searchParams.get("who");

  console.log("Querystring으로 전달받은 id : ", id);
  console.log("Querystring으로 전달받은 mode :", mode);
  console.log("Querystring으로 전달받은 who :", who);

  return (
    <div>
      <h1></h1>
      <p>이곳은 수정 페이지입니다.</p>
      <button onClick={() => setSearchParams({ who: "잘하고싶어요." })}>
        Querystring 변경
      </button>
    </div>
  );
};
export default Edit;

 

3. Page Moving

 - useNavigate

로그인이 안된 사용자가 로그인이 할 때 값을 비교하여 로그인이 안 됐다면 강제로 로그인 페이지로 이동시킬 수 있다.

즉 의도적으로 페이지를 변경할 수 있다.

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

const Edit = () => {

  const navigate = useNavigate();

  return (
    <div>
      <h1></h1>
      <p>이곳은 수정 페이지입니다.</p>
      
      <button
        onClick={() => {
          navigate("/home");
        }}
      >
        Home으로 가기
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로가기
      </button>
    </div>
  );
};
export default Edit;

navigate(-1) 뒤로가기