[React Router] URL 질의 문자열 가져오기

React Router(v5)를 사용하여 http://localhost:3000/books?hoge=1111&fuga=aiueo와 같은 URL을 검색하는 몇 가지 방법을 시도했습니다.또한 Type Script를 사용하여 구현합니다.

스스로 얻다

?hoge=1&fuga=aiueo에 search와 같은 문자열이 설정되어 있습니다.나는 이 문자열을 조작해서 강제로 얻었다.특별한 제한이 없다면, 나는 이것이 채택되지 않을 것이라고 생각한다.

import React from 'react';
import { useLocation } from 'react-router-dom';

interface QueryString {
  [key: string]: string;
}

const Books: React.FC = () => {
  const search = useLocation().search;

  const query1 = search
    .slice(1)
    .split('&')
    .map((str) => [str.split('=')[0], str.split('=')[1]])
    .reduce((acc, a) => {
      acc[a[0]] = a[1];
      return acc;
    }, {} as QueryString);

  return (
    <div>
      <h2>Books Page</h2>
      <div>hoge: {query1['hoge']}</div>
      <div>fuga: {query1['fuga']}</div>
    </div>
  );
};

export default Books;

URLSearchParams로 획득

이것은 React Router 문서에 기재된 방법입니다.?hoge=1111&fuga=aiueo.가장 간단한 느낌이 좋아요.그러나 URLSearchParams는 IE를 지원하지 않습니다.
https://reactrouter.com/web/example/query-parameters

import React from 'react';
import { useLocation } from 'react-router-dom';

const Books: React.FC = () => {
  const search = useLocation().search;

  const query2 = new URLSearchParams(search);
  return (
    <div>
      <h2>Books Page</h2>
      <div>hoge: {query2.get('hoge')}</div>
      <div>fuga: {query2.get('fuga')}</div>
    </div>
  );
};

export default Books;

query-string으로 얻다

URLSearchParams 라이브러리에서 얻을 수 있습니다.query-string 더 복잡한 변환이 필요할 때 사용하는 것이 좋다(GiitHub의 README.md에 각종 API의 사용 예시가 기재되어 있다).하지만 IE 가 대응하지 않는 것 같습니다.
https://github.com/sindresorhus/query-string

import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Books: React.FC = () => {
  const search = useLocation().search;

  const query3 = queryString.parse(search);
  return (
    <div>
      <h2>Books Page</h2>
      <div>hoge: {query3['hoge']}</div>
      <div>fuga: {query3['fuga']}</div>
    </div>
  );
};

export default Books;

총결산

내 (업무와 개인)이 실시하는 범위 내에서 IE가 대응할 필요가 없기 때문에 두 가지 선택이 있을 수 있다. 그것이 바로 사용URLSearchParams이냐, 사용URLSearchParams이냐.