React Router

React Router

설치

yarn add react-router-dom

세팅

라우터는 아래와 같이 src > index.js에 App을 BrowserRouter로 감싸서 App에서 Route에 따라 컴포넌트를 렌더링 해줄 수 있게 한다.

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

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

• BrowserRouter : 주소 / 에 따라서 다르게 렌더링한다.
• MemoryRouter : 보여지는 / 주소는 똑같지만, 임의의 보여지지 않는 주소로 다르게 렌더링해준다.

적용

import { Route, Routes, Link } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";

function App() {
  return (
    <>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

export default App;

링크를 눌러서 경로를 이동하고 싶은 경우 <a>가 아닌 Router의 <Link>를 이용해야 한다.

<a> 태그를 통해 이동할 경우 페이지가 새롭게 로딩된다.

하지만 우리는 새로운 요청을 하지 않고 페이지 리렌더링만 이루어지는 것을 원한다.

Router의 <Link>를 이용하면 페이지가 새롭게 로딩되지 않고, 리렌더링만 이루어지는 것을 확인할 수 있다.

👉 확인방법
개발자도구 Network 탭에서 <a> 태그를 눌러서 이동했을 때와, <Link> 태그를 통해 이동했을 때를 패치되는 내용을 확인해보면 된다.

useParams

URL 파라미터에 접근하여 담긴 데이터를 확인할 수도 있다.
아래와 같이 해당 라우트에 보여질 컴포넌트와, 변수명을 설정해준다.

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

function App() {
  return (
      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
  );
}

export default App;

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

const profileData = {
  velopert: {
    name: "김민준",
    description: "Frontend Enginner @RIDI",
  },
  homer: {
    name: "호머 심슨",
    description: "마지 심슨 남편",
  },
};

const Profile = () => {
  const { username } = useParams();
  const profile = profileData[username];

  if (!profile) {
    return <div>존재하지 않는 사용자입니다!</div>;
  }

  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
};

다음과 같이 설정 후 프로젝트에서 /profile/velopert 또는 /profile/homer와 같이 접근했을 때 각각 다른 데이터가 보여지는 것을 확인할 수 있다.

그리고 /profile/asdf와 같이 없는 유저 값으로 접근 시 존재하지 않는 사용자입니다! 문구가 출력되는 것을 확인할 수 있다.

출처

• [React] URL 정보가져오기(match,useParams)