[React Router] URLクエリストリングを取得する

React Router(v5)を使っていて、http://localhost:3000/books?hoge=1111&fuga=aiueoというようなURLのクエリストリング?hoge=1&fuga=aiueoを取得する方法をいくつか試してみました。なお、TypeScriptで実装しています。

自力で取得する

searchには?hoge=1111&fuga=aiueoというような文字列がセットされています。この文字列を操作して無理やり取得してみました。何かものすごく制約がない限り、これは採用しないと思います。

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のドキュメントに記載のある方法です。URLSearchParamsを使用します。一番シンプルで良さそうです。ただし、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で取得する

query-stringというライブラリで取得できます。URLSearchParamsより複雑な変換が必要な場合に使うと良さそうです（GitHubの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を使うかquery-stringを使うかの二択になりそうです。