はじめに

ウェブアプリケーションを使っていると、同じページでもパラメータによって表示を変えたいということは多々ありますよね。

本記事では、React + TypescriptのプロジェクトでURLにパラメータを使って表示を変える方法をまとめていきたいと思います。

前提

react-router-domを使ったReact Typescriptのプロジェクトがある
- 本記事では前回の記事で使ったプロジェクトを使います

React TypescriptでRouterを導入する

パスパラメータ

GETパラメータのように ?id=1というような形ではなく、パスの一部としてパラメータを埋め込んだ形をパスパラメータと言います。

↓の１の部分がパスパラメータです。

/url/path/1

Routerの書き方

Routerでパスパラメータを設定します。

<Route path="/abc/:id" element={<Abc />} />

このように、コロン（:）をつけることでパスパラメータの設定が可能です。

コンポーネントで値を受け取る

Abcコンポーネントで idを受け取ってみましょう。そしてそれを画面に表示してみましょう。

値を受け取って表示するには以下のようにします。

type AbcProps = { ⇦ パラメータのデータ型を定義する
  id: string
}

const Abc = () => {
  const urlParams = useParams<AbcProps>() ⇦ここでパラメータ全体を受け取る
  const id = urlParams.id; ⇦ パラメータの中から id を受け取る
  return (
    <div className="App">
      <p>This is abc Page</p>
      <p>The ID is {id}</p> ⇦ id を表示する
      <Link to="/">
        <p>To Top Page</p>
      </Link>
    </div>
  )
}

export default Abc;

画面で見てみる

これで設定は終わったので画面で見てみましょう

idに aaaa を指定する

The ID is aaaaが表示されています 👍

では別の値を使ってみます

パスパラメータに指定している12345が表示されています 👍

GETパラメータ

では次にGETパラメータを試してみましょう。

Routerの設定

routerの設定には特には何も指定する必要はありません。

<Route path="/abc" element={<Abc />} />

Abcコンポーネントの設定

値を受け取るところはこのように書けばOKです。

const [searchParams] = useSearchParams();
const id = searchParams.get("id");

これで準備OKです。

さて、ブラウザで見てみましょう。

ブラウザで見てみる

GETパラメータに id=1000を付与してみます。

付与した値である1000が表示されていますね 👍

React Typescriptプロジェクトでパラメータを含むURLの扱いについてまとめる