Reactでのクエリパラメータの扱い方について学ぶ

学んだこと

クエリパラメータとは

• URL に付属し、サーバに情報を送る文字列を指す。
• https://example.com/lp_01/index.html?waad=aBcDXxXx
  • ?以降の文字列がクエリパラメータになる。
  • 各パラメータは、名前と値を= 記号で分けて書く。
  • 複数パラメータを付ける場合は、パラメータ同士を& 記号で分けて書く。

クエリパラメータを実装してみた

• UrlParameter.jsx
  • react-router-domのuseLocationを使用して実装した。
  • useLocationにて URL の情報を取得する。
    • URLSearchParamsにてuseLocationで取得した URL 情報からクエリパラメータを取得する。
    • クエリパラメータをquery.get(名前)で取得し、クエリパラメータの値を取得する。

import { useParams, useLocation } from 'react-router-dom';
export const UrlParameter = () => {
  const { id } = useParams();
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  return (
    <div>
      <h1>UrlParameterページです</h1>
      <p>パラメータは{id}です</p>
      <p>クエリパラメータは{query.get('name')}です</p>
    </div>
  );
};

• Page2.jsx
  • Link 内で URL にクエリパラメータを設定した。
  • /page2/9999?name=hogehogeの?以降がクエリパラメータに該当する。

import { Link } from 'react-router-dom';

export const Page2 = () => {
  return (
    <div>
      <h1>Page2ページです。</h1>
      <Link to="/page2/9999">URL Parameter</Link>
      <br />
      <Link to="/page2/9999?name=hogehoge">Query Parameter</Link>
    </div>
  );
};