React 라우터 시작하기

이 블로그에서는 React Router의 기본 사항을 살펴보고 첫 번째 단계부터 시작하겠습니다.

기본 사항

React Router는 React 및 React Native용 클라이언트 측 라이브러리입니다.

새로 고칠 필요 없이 다른 페이지로 이동할 수 있습니다.

선언적 라우팅과 명령적 라우팅이 모두 지원됩니다.

처음 사용

우리는 새 프로젝트에서 라우터를 구현하고 개념을 단계별로 학습할 것입니다.

명령을 사용하여 라우터를 설치합니다.$ npm install react-router-dom@6

만들려는 두 경로를 가리키는 두 페이지를 만듭니다.

const FeedPage = () => {
  return <div>This page shows feeds.</div>;
};
export { FeedPage };

const UserPage = () => {
  return <div>This page shows the details of a user.</div>;
};
export { UserPage };

"react-router-dom"에서 BrowserRouter, 경로 및 경로를 가져옵니다. BrowserRouter 로 전체 프로젝트를 래핑합니다. 이는 반응 라우터가 작동하는 데 필요합니다. Routes 안에 BrowserRouter 를 중첩합니다. 이제 지정하려는 각 경로에 대해 Route 요소를 추가하십시오.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { FeedPage, UserPage } from "./pages";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="feed" element={<FeedPage />} />
        <Route path="user" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

여기서 /feed는 FeedPage를 가리키고 /user는 UserPage를 가리킵니다.

이제 주소 표시줄의 루트feed에 user 또는 /를 추가하면 해당 페이지로 이동하는 것을 볼 수 있습니다.

짜잔! 우리는 최소한의 react-router만 구현했습니다.

링크를 사용하여 탐색

수동으로 주소를 변경하여 경로를 탐색하는 것은 그다지 편리하지 않습니다. 이제 Link 구성 요소를 사용하여 원하는 페이지로 이동합니다.

탐색할 두 개의 링크 구성 요소를 추가할 Homepage를 만듭니다.

<Route path="" element={<HomePage />} />

두 개의 Link 구성 요소를 HomePage 가져오기 및 추가

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

const HomePage = () => {
  return (
    <div>
      <div>
        <Link to="feed">Feed</Link>
      </div>
      <div>
        <Link to="user">User</Link>
      </div>
    </div>
  );
};
export { HomePage };

Links는 앵커 태그와 유사하지만 페이지 새로고침으로 이어지지는 않습니다. 이제 링크를 클릭하면 해당 페이지로 이동합니다.

URL 매개변수

경로를 탐색하는 것은 좋지만 userId와 같은 일부 식별자를 사용하여 특정 사용자를 나열해야 하는 경우에는 어떻게 해야 합니까?

매개 변수로 userId를 사용하도록 사용자 경로를 편집합니다.

<Route path="user/:userId" element={<UserPage />} />

HomePage에서 Link를 다음으로 편집합니다.

<Link to={`/user/${123}`}>User</Link>

여기서 123은 사용자 경로에 전달되는 매개변수 값입니다.

다음과 같이 UserPage 후크를 사용하여 useParams()에서 전달된 매개변수를 읽을 수 있습니다. Route 구성 요소에서 사용한 매개변수 이름은 UserPage에서 매개변수에 액세스하는 데 사용됩니다.

전달된 매개변수를 다음과 같이 읽습니다.

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

const UserPage = () => {
  let params = useParams();
  return <div>This page shows the details of user {params.userId}.</div>;
};
export { UserPage };

이제 홈페이지에서 링크를 클릭하면 지정된 사용자 ID로 성공적으로 라우팅되는 것을 볼 수 있습니다.

일치하지 않는 경로

사용자가 실수로 정의되지 않은 경로로 라우팅되면 어떻게 됩니까? 이를 위해 Route 안에 경로로 '*'가 있는 Routes를 추가할 수 있습니다. 이 경로는 일치하는 경로가 없을 때 일치합니다.

다음과 같이 일치하지 않는 경로를 추가합니다.

<Route path="*" element={<div>Page not found!</div>}/>

이제 정의되지 않은 경로로 이동하면 페이지가 존재하지 않는다는 적절한 메시지가 표시됩니다!

프로그래밍 방식으로 탐색

지금까지 우리는 <Link>를 통해 경로를 탐색하는 한 가지 방법만 보았습니다. 버튼 클릭 또는 페이지 새로고침과 같은 일부 작업이 수행된 후 경로를 탐색해야 하는 경우 어떻게 해야 합니까? 그렇게 할 수 있는 후크useNavigate()가 있습니다.

홈페이지에 버튼을 추가해 보겠습니다. 이 버튼을 클릭하면 FeedPage 로 이동합니다.

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

const HomePage = () => {
  let navigate = useNavigate();
  const buttonClickHandler = () => {
    navigate("feed");
  };
  return (
    <div>
      <button onClick={buttonClickHandler}>Feed Page</button>

이제 버튼을 클릭하면 성공적으로 Feed 페이지로 이동하는 것을 볼 수 있습니다.

데모

끝

그래서 이것은 소개 React Router에 관한 것입니다. React-Router의 새로운 사용자에게 친숙한 초보자였기를 바랍니다. 피드백이나 의견을 남겨주세요.

좋은 하루 보내세요!