はじめに
ウェブアプリケーションを使っていると、同じページでもパラメータによって表示を変えたいということは多々ありますよね。
本記事では、React + TypescriptのプロジェクトでURLにパラメータを使って表示を変える方法をまとめていきたいと思います。
前提
react-router-dom
を使ったReact Typescriptのプロジェクトがある- 本記事では前回の記事で使ったプロジェクトを使います
パスパラメータ
GETパラメータのように ?id=1
というような形ではなく、パスの一部としてパラメータを埋め込んだ形をパスパラメータと言います。
↓の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
が表示されていますね 👍