reactでURLパラメータから値を取得する方法

はじめに

現在ポートフォリオのフロント側をreactで開発しています。
開発の中でURLパラメータの値を取得したい場面があったので、その中で調べたことを備忘録として残します。

環境

react 18.0.0
react router dom 5系
rails 6.1.4
M1mac

パラメータの値を取得

値を取得するにはreact-router-domからuseLocationをimportし、searchプロパティをするように記述をします。（const searchの箇所)

そして、URLSearchParamsクラスを使えばパラメータの値を取得する準備が完了します。
(const queryの箇所）

最後にパラメータの名前(今回だとname)をキーとしてquery.get内で指定してあげれば、値を取得できるようになります。

//urlがhttps://hoge.app?name=fugaだった場合("name=fuga"取得したい値)

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

const NameQuery: React.FC = () => {
  const search = useLocation().search;
  const query = new URLSearchParams(search);
  const name = query.get('name')

  return (
    <p>{name}</p>
    //fugaが表示される
  );
}

昨日調べて実装しただけなので、パラメータ取得については数時間しか経験がありません。
まだ深い部分まで理解できていないかもしれませんが、比較的簡単に実装することができました。

他にもuseLocationでできることはあるみたいなので、全体的に調べてみようと思います。

参考