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のパラーメータが取得できないことでした!

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

コメント