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

react-router-dom を使う
感想

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>
  )

}

一瞬で取得可能！

やったね！