React でURL パラメータをめっちゃ簡単に取得する方法

react-router-dom を使う

react-router-domのカスタムフックを使えば一瞬で取得できました！

まずは導入方法から。

$ yarn add react-router-dom

次にURLパラメーターの取得方法

• useLocation()：　 URL path や パラメータなど。JSのlocationと同じ
• useParams()：　URLのパスパラメータを取得。例えば、 /uses/2 なら、2の部分を取得
• useHistory()：　historyオブジェクトを取得。

コードの例：

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

export default function UrlParameter(){
  const location = useLocation(); // URL path や パラメータなど。JSのlocationと同じ
  const params = useParams();     // URLのパスパラメータを取得。例えば、 /uses/2 なら、2の部分を取得
  const history = useHistory();   // historyオブジェクトを取得。

  return(
    <p>ロケーション：{location}</p>
    <p>パスパラメーター：{params}</p>
    <p>履歴：{history}</p>
  )

}

一瞬で取得可能！

やったね！

感想

基本的にバックエンドが専門なのですが、Reactでフロントエンドも開発してます。

開発で困ったのが、React で URLのパラーメータが取得できないことでした！

同じような課題がある方に対して、備忘録を残して起きます。