ReactでURLパラメーターの取得方法(TypeScript) | フルスタックエンジニアライフ

ReactでReact Routerを使ってルーティングをする場合に指定したURLにパラメーターを渡して遷移先の画面でそのパラメーターを取得する方法を紹介します。
TypeScriptを使っているとなかなか通常のやり方ではうまくいかないケースが発生するのでメモ。

ルーティング

{ path: '/userDetail/:id', name: 'userDetail', component: UserDetail },

このようなルーティング記述をした場合のURLは
http://localhost:3000/userDetail/3
や
http://localhost:3000/userDetail/10
といったパスになります。
遷移元でURLにセットした3や10のパラメーターを画面遷移先で取得したいわけなのです。

画面遷移元

// idには3や10のパラメーターが格納される
history.push('/companyEdit/' + id);

画面遷移先

書き方その①　interfaceを使った書き方

import React from 'react'
import { useParams } from 'react-router-dom'

interface RouterParams {
  id: string
}

const UserEdit = ()  => {
  const {id} = useParams<RouterParams>();
  return (
    <>
      <div>id = {id}</div>
    </>
  )
}

export default CompanyEdit

書き方その②　interfaceを使わない書き方

こっちのほうがスッキリしてる

import React from 'react'
import { useParams } from 'react-router-dom'

const UserEdit = ()  => {
  const {id} = useParams<{id: string}>();
  return (
    <>
      <div>id = {id}</div>
    </>
  )
}

export default CompanyEdit

以上。URLパラメーターを取得する方法でした。
TypeScriptを使った場合のパラメーター渡しでは型の指定を忘れずに。ですね！！

RouteComponentPropsというコンポーネントを使う方法もあるみたいですが、こちらはうまくいかなかったので後日また試してみることにします。