React 라우터 동적 경로

1. React 라우터 동적 경로
2. React 라우터 사용자 지정 구성 요소
3. React 라우터 동적 경로 예

React는 웹 애플리케이션 구축을 위한 가장 인기 있는 라이브러리 중 하나입니다. 그러나 React가 렌더링 UI를 다루는 라이브러리일 뿐이라는 사실을 아는 사람은 많지 않습니다.

Angular와 같은 라우팅 솔루션이 내장되어 있지 않습니다. 이러한 이유로 React 개발자는 외부 라이브러리를 사용하여 React에서 라우팅 기능을 구현해야 합니다.

대부분의 개발자는 react-router를 사용하여 React에서 탐색 및 라우팅 기능을 구현합니다.

React 라우터 동적 경로

둘 이상의 페이지가 있는 웹 애플리케이션을 빌드하려는 경우 URL의 패턴인 경로를 정의해야 합니다.

예를 들어 react-router를 사용하여 URL이 www.mywebsite.com/인 경우 React가 Home 구성 요소를 표시하도록 지정할 수 있습니다.

애플리케이션에 같은 종류의 페이지가 많이 있으면 상황이 조금 더 복잡해집니다. 예를 들어 블로그를 방문하면 다음과 같이 각 게시물의 URL에 제목이 있는 것이 일반적입니다.

수천 개의 게시물이나 제품이 있는 경우 각각에 대한 경로를 수동으로 정의할 수 없습니다. 다행스럽게도 React Router를 사용하면 특정 항목에 대한 URL을 자동으로 생성하는 동적 경로를 쉽게 만들 수 있습니다.

이 기사에서는 React 앱에서 이러한 기능을 달성하는 방법을 보여줍니다.

React 라우터 사용자 지정 구성 요소

먼저 가져올 네 가지 사용자 지정 구성 요소부터 시작하겠습니다. 이들은 react-router 라이브러리에서 가장 일반적으로 사용되는 사용자 지정 구성 요소입니다.

<BrowserRouter>는 페이지 간 탐색을 처리하는 주요 구성 요소입니다. 브라우저와 함께 작동하여 각 URL에 맞는 페이지를 표시합니다.

<BrowserRouter>는 전체 애플리케이션을 감싸야 합니다. 이 래퍼의 여는 태그와 닫는 태그 사이에만 다른 사용자 지정 구성 요소를 사용할 수 있습니다.

자세한 내용은 공식 문서를 참조하세요.

<Route> 및 그 하위 <Route> 구성 요소를 사용하여 현재 URL(위치)을 기반으로 렌더링해야 하는 항목을 지정합니다. 여기에서 자세히 알아보세요.

마지막으로 <Link> 구성 요소는 HTML의 <a> 요소의 수정된 버전입니다. 한 페이지에서 다른 페이지로 더 부드럽게 전환할 수 있습니다.

사용자가 <Link> URL을 클릭하면 React 앱이 다시 로드되지 않습니다. 사용자를 목적지로 즉시 안내합니다.

<링크> 컴포넌트에 대한 자세한 내용은 여기를 참조하십시오.

React 라우터 동적 경로 예

세 개의 게시물이 있는 응용 프로그램의 실제 예를 살펴보겠습니다.

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

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="posts/:title" element={<Post />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  var posts = [
    { title: "Guide to React" },
    { title: "Guide to Vue" },
    { title: "Guide to Angular" }
  ];
  return (
    <div className="App">
      Hello
      {posts.map((post) => (
        <>
          <br />
          <Link to={"posts/" + post.title}>{post.title}</Link>
          <br />
        </>
      ))}
    </div>
  );
}

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

CodeSandbox에서 코드를 가지고 놀 수 있습니다.

먼저 <BrowserRouter>, <Routes>, <Route>, <Link>의 네 가지 사용자 지정 구성 요소를 가져옵니다. 나중에 설명할 useParams 후크도 가져옵니다.

구성 요소와 경로를 매핑하기 위한 <Route> 구성 요소를 포함하는 App이라는 기본 구성 요소가 있습니다.

<Route> 컴포넌트의 첫 번째 인스턴스는 매우 간단합니다. 방문자가 '/' 페이지('website.com/')에 있으면 <Home> 구성 요소를 렌더링하도록 React에 지시합니다.

<Route> 구성 요소의 두 번째 인스턴스는 다릅니다. path 속성은 "posts/:title" 문자열과 같습니다.

즉, URL이 "posts/:title"과 일치하는 경우 <Post> 구성 요소를 표시합니다. 세미콜론 :은 URL의 제목 부분이 동적으로 생성될 수 있음을 의미합니다.

게시물 제목이 'Guide to React'인 경우 URL은 'website.com/posts/Guide To React'입니다.

홈 구성 요소에서 동적 URL을 생성합니다. 각각 고유한 제목이 있는 3개의 게시물 배열이 있습니다.

.map() JavaScript 메서드를 사용하여 각 게시물에 대한 고유한 링크를 생성하는 사용자 지정 <Link> 구성 요소를 생성합니다.

가장 중요한 부분은 <Link> 사용자 컴포넌트의 to 속성입니다. 자세히 살펴보겠습니다.

<Link to={"posts/" + post.title}>{post.title}</Link>

각 게시물에 대해 고유한 "posts" 및 post.title 값의 두 문자열을 연결합니다. 결과적으로 각 URL에는 URL에 게시물의 제목이 포함됩니다.

URL에서 값에 액세스

각 <Route> 구성 요소는 URL 경로와 URL을 기반으로 렌더링해야 하는 구성 요소를 지정합니다. <Post> 하위 구성 요소가 렌더링되면 useParams() 후크를 사용하여 URL에서 :title 변수에 액세스할 수 있습니다.

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

{urlParameters.title} 구문을 사용하여 URL 매개변수의 값을 표시합니다. 모든 JavaScript 표현식은 중괄호로 묶어야 합니다.