💭
[React]query-stringでURLクエリを取得する
はじめに
今回紹介するコードの完成形はこちら↓
パッケージのインストール
npm i query-string
実装
今回は.parseを使ってクエリをオブジェクトへ変換し、表示する。
const { search } = useLocation();
// > searchが"?hoge=hoge&fuga=fuga&fizz=fizz&bizz=bizz"と仮定
const parseQS = queryString.parse(search);
const parseQSKeys = Object.keys(parseQS);
return parseQSKeys.map(key => <div>{`${key}：${parseQS[key]}
// 出力
bizz：bizz
fizz：fizz
fuga：fuga
hoge：hoge
URLSearchParamsでの書き換え
query-stringを使わずに実装したい際はURLSearchParamsを使うと良い。
const { search } = useLocation();
// > searchが"?hoge=hoge&fuga=fuga&fizz=fizz&bizz=bizz"と仮定
const urlSearchParam = new URLSearchParams(search);
const urlSearchParamKeys = [...urlSearchParam.keys()];
return urlSearchParamKeys.map(key => <div>{`${key}：${urlSearchParam.get(key)}`}
// 表示
hoge：hoge
fuga：fuga
fizz：fizz
bizz：bizz
以上！
Discussion