React Router v6에서 URL 매개변수 및 쿼리 문자열 마스터하기

React Router v6의 URL 매개변수 및 쿼리 문자열

URL 매개변수와 쿼리 문자열은 웹 애플리케이션의 URL 관리에 있어 중요한 측면입니다. 이를 통해 동적 데이터를 다른 경로에 전달하고 해당 데이터를 기반으로 라우팅을 관리할 수 있습니다. React Router v6은 URL 매개변수 및 쿼리 문자열 처리를 원활하게 지원하므로 더욱 동적이고 유연한 애플리케이션을 구축할 수 있습니다.

---

1. React Router v6의 URL 매개변수

경로 매개변수 또는 동적 매개변수라고도 하는 URL 매개변수는 동적 값을 캡처하는 데 사용할 수 있는 URL의 일부입니다. 이는 일반적으로 특정 리소스나 엔터티를 식별하는 데 사용됩니다.

URL 매개변수의 예:

/profile/:username과 같은 경로의 경우 사용자 이름 부분은 URL 매개변수입니다.

1단계: URL 매개변수로 경로 정의

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

설명:

• /profile/:username 경로의 :username은 URL 매개변수입니다.
• useParams 후크는 프로필 구성 요소 내에서 URL 매개변수(사용자 이름) 값에 액세스하는 데 사용됩니다.
• 사용자가 /profile/john으로 이동하면 "john" 값이 매개변수로 전달되고 Profile 구성 요소에 표시됩니다.

URL 매개변수에 대한 주요 내용:

• 동적 경로 일치: URL 매개변수를 사용하면 동적 경로를 일치시킬 수 있습니다. 예를 들어 /profile/:username은 /profile/john 또는 /profile/sarah와 일치할 수 있습니다.
• 매개변수 액세스: 경로의 매개변수 값에 액세스하려면 useParams를 사용하세요.

---

2. React Router v6의 쿼리 문자열

쿼리 문자열은 ? 뒤에 나타나는 키-값 쌍입니다. URL에서. 일반적으로 추가 정보를 서버에 전달하거나 경로를 변경하지 않고 페이지 동작을 수정하는 데 사용됩니다.

쿼리 문자열의 예:

/search?query=React와 같은 URL의 경우 쿼리 문자열은 ?query=React입니다.

1단계: useLocation으로 쿼리 문자열 처리

React Router v6에서는 useLocation 후크를 사용하여 쿼리 문자열에 액세스할 수 있습니다. useLocation은 경로 이름, 검색(쿼리 문자열) 및 해시를 포함하여 현재 URL에 대한 액세스를 제공합니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

설명:

• useLocation: 이 후크는 경로 이름, 검색(쿼리 문자열) 및 해시를 포함하는 현재 위치 개체를 제공합니다.
• URLSearchParams: 쿼리 문자열을 구문 분석하고 쿼리 매개변수 값을 추출하는 데 사용됩니다.
• 예제에서는 URL에서 쿼리 매개변수 쿼리가 추출되고 해당 값이 검색 구성 요소에 표시됩니다.

쿼리 문자열에 대한 주요 내용:

• useLocation: 쿼리 문자열을 포함하여 현재 위치에 액세스합니다.
• URLSearchParams: 쿼리 매개변수를 구문 분석하고 추출하는 편리한 API입니다.

---

3. URL 매개변수와 쿼리 문자열 결합

동일한 경로에서 URL 매개변수와 쿼리 문자열을 모두 사용할 수도 있습니다. 예를 들어 동적 사용자 이름을 기반으로 사용자 프로필을 표시하고 쿼리 매개변수를 사용하여 데이터를 필터링할 수 있습니다.

URL 매개변수와 쿼리 문자열이 모두 포함된 예:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

const Search = () => {
  // Use the useLocation hook to access the query string
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query'); // Extract query parameter from the URL

  return (
    <div>
      <h2>Search Results</h2>
      {query ? <p>Searching for: {query}</p> : <p>No search query provided</p>}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/search?query=React">Search for React</Link></li>
          <li><Link to="/search?query=JavaScript">Search for JavaScript</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
};

export default App;

설명:

• 이 예에서는 URL 매개변수 사용자 이름과 쿼리 문자열 age가 /profile/:username?age= URL.
• 사용자 이름은 useParams를 사용하여 액세스하고 연령 필터는 useLocation 및 URLSearchParams를 사용하여 액세스합니다.

주요 시사점:

• 매개변수 결합: URL 매개변수와 쿼리 문자열을 결합하여 더 복잡한 라우팅 시나리오를 만들 수 있습니다.
• 별도의 우려사항: URL 매개변수는 일반적으로 리소스 식별(예: 사용자 프로필)에 사용되는 반면, 쿼리 문자열은 추가 필터링 또는 구성(예: 검색어, 필터)에 사용됩니다.

---

결론

React Router v6을 사용하면 라우팅 로직에서 URL 매개변수와 쿼리 문자열을 모두 간단하게 처리할 수 있습니다. useParams 후크를 사용하면 동적 경로 매개변수에 쉽게 액세스할 수 있으며 useLocation 및 URLSearchParams는 쿼리 문자열을 관리하는 데 도움이 됩니다. 이러한 도구를 효과적으로 이해하고 사용하면 향상된 라우팅 기능을 갖춘 동적이고 유연한 React 애플리케이션을 만들 수 있습니다.

---

위 내용은 React Router v6에서 URL 매개변수 및 쿼리 문자열 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!