해결됨: url 반응 라우터 dom v6에서 쿼리 가져오기

URL React Router DOM v6에서 쿼리를 가져오는 것과 관련된 주요 문제는 쿼리 매개 변수에 액세스하는 기본 제공 방법을 제공하지 않는다는 것입니다. 대신 개발자는 URL 문자열을 수동으로 구문 분석하고 쿼리 매개변수 자체를 추출해야 합니다. 이는 지루한 프로세스일 수 있으며 올바르게 수행하지 않으면 오류가 발생할 수 있습니다. 또한 URL 구조가 변경되면 그에 따라 코드를 업데이트해야 할 수도 있습니다.

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

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. "'react-router-dom'에서 { useLocation } 가져오기;" – 이 줄은 react-router-dom 라이브러리에서 useLocation 후크를 가져옵니다.
2. “const MyComponent = () => {” – 이 줄은 React 구성 요소를 반환할 MyComponent라는 함수를 선언합니다.
3. "const 위치 = useLocation();" – 이 줄은 가져온 useLocation 후크를 사용하여 응용 프로그램의 현재 위치(예: URL)에 대한 정보를 가져옵니다.
4. "const queryParams = new URLSearchParams(location.search);" – 이 행은 현재 URL의 모든 쿼리 매개변수를 포함하는 객체를 생성합니다(예: ?myParam=foo).
5. 나머지 코드는 URL 쿼리 문자열(있는 경우)에 myParam 값을 표시하는 h1 및 p 태그가 있는 React 구성 요소를 반환합니다.

React 라우터 Dom

React Router DOM은 개발자가 React 애플리케이션 내에서 경로를 만들고 관리할 수 있게 해주는 React용 라우팅 라이브러리입니다. 애플리케이션 탐색을 위한 API를 제공하여 개발자가 경로를 선언적으로 정의하고, 현재 URL을 기반으로 구성 요소를 렌더링하고, 애플리케이션의 다른 부분을 연결할 수 있도록 합니다. 또한 동적 경로 일치, 위치 추적 및 내비게이션 가드와 같은 기능을 지원합니다.

반응 v6 라우터에서 쿼리 문자열을 어떻게 얻습니까?

v6

React Router v6에서는 useLocation 후크를 사용하여 쿼리 문자열 매개변수에 액세스할 수 있습니다. 이 후크는 경로 이름, 검색, 해시 및 상태 속성을 포함하여 현재 URL에 대한 정보가 포함된 위치 개체를 반환합니다. search 속성에는 쿼리 문자열 매개 변수가 문자열로 포함되어 있습니다. 그런 다음 이 문자열을 구문 분석하여 모든 쿼리 문자열 매개 변수를 포함하는 개체를 가져올 수 있습니다.
예 :
const {검색} = useLocation();
const params = 새로운 URLSearchParams(검색);
const param1 = params.get('param1');