Reactで送られてきたURLパラメータを取得して整形

送られてきたURLパラメータを取得、整形

ReactでURLパラメータを取得するには、例えば下のようにComponentDidMount()の中に書きます。

componentDidMount() {
  //URLパラメータを文字列で取得(?含む)
  let urlParamStr = window.location.search

  if (urlParamStr) {
    //?を除去
    urlParamStr = urlParamStr.substring(1)

    let params = {}

    //urlパラメータをオブジェクトにまとめる
    urlParamStr.split('&').forEach( param => {
      const temp = param.split('=')
      //pramsオブジェクトにパラメータを追加
      params = {
        ...params,
        [temp[0]]: temp[1]
      }
    })
  }
}

URLからパラメータを取得

URLからパラメータを取得するには window.location.serach を呼び出します。

//URLパラメータを文字列で取得(?含む)
let urlParamStr = window.location.search

window.location.searchはアクセスされたURLの ? 以降を文字列で取得できます。？が含まれていることに注意です。

パラメータの文字列をオブジェクトに整形

取得できたパラメータは文字列なのでそのままでは使えません。

ここからは好きなように整形すればいいのですが、例えばオブジェクト形成で{ name: value } の形で整形するコード例は以下です。

//?を除去
urlParamStr = window.location.search.substring(1)

let params = {}

//urlパラメータをオブジェクトにまとめる
urlParamStr.split('&').forEach( param => {
  const temp = param.split('=')
  //pramsオブジェクトにパラメータを追加
  params = {
    ...params,
    [temp[0]]: temp[1]
  }
})

これで変数paramsに全てのパラメータが入ります。

URLが example.com?id=100&name=dog で送られてきた場合、paramsは下のようなオブジェクトになります。

//example.com?id=100&name=dog で来た場合
params = {
  id: 100,
  name: "dog"
}

まず、substring()で?を除去しています。

split()で “&” 毎にパラメータの組みを配列にし、forEach()でそれぞれに対して “=” で分解、オブジェクトのプロパティに追加しています。

…という演算子はES6から追加された分割代入の演算子です。詳しくは下の記事を参照。

ES6のjsでオブジェクトを結合したりコピーする簡単な方法

オブジェクトを結合したりコピーしたり reactではオブジェクトからコピーを作ったり、オブジェクト同士を結合して新しいオブジェクトを作りたいことが頻繁にあります。 そこで使えるメソッドとしてObject.assign()というのがあるん...

hatolabo.com

2018.10.22