useParams

ユースパラムス

useParams を分かりやすく

「useParams」って聞いたことありますか？「そもそもこれいつ使うん？」って思いますよね。でも大丈夫、ちゃんと説明しますからね。useParamsはReactのルーティングライブラリ「React Router」の一部で、URLのパラメータを取得するために使われるんです。

例えば、ブログアプリを作っていて、特定の記事を表示するページがあるとしましょう。そのページのURLは「/posts/:id」のようになっていて、":id" の部分に記事のIDが入るんです。useParamsを使えば、そのIDを取得できるというわけなんですよ。

「じゃあどうやって使うの？」って思いますよね。例え話で分かりやすく説明しましょう。あなたが郵便配達だと想像してみてください。あなたの手元にはたくさんの手紙があり、それぞれには異なる住所が書かれています。手紙（リクエスト）を正しい家（ルート）に配るためには、その住所（URLパラメータ）を読む必要があります。useParamsはまさにその「住所を読む」役割を果たしてくれるんです。

さて、具体的にコードで見てみましょう。

import { useParams } from "react-router-dom";

function PostPage() {
  const { id } = useParams();

  // idを使って何かする...

  return <div>...</div>;
}

このコードでは、URLからidパラメータを取得しています。このidは、URLの"/posts/:id"の部分にあたるものですね。idを取得できれば、それを元にデータベースから記事を取得したりできるわけです。

ここまで大丈夫ですか？useParamsは、特定のパラメータをURLから取り出すための強力なツールです。一度理解してしまえば、めっちゃ便利なんですよ！「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。だいぶヤバいやつです。

結論

useParams は、現在の URL によって入力されたルートの動的パラメータを読み取ることができるクライアントコンポーネントフックです。一致した動的パラメータのキーと値のペアのオブジェクトを返します。useParams フックは、React Router のフックであり、現在の URL のパラメータにアクセスするために使用できます。このフックは、React Router バージョン 5.1 で導入されました。

useParams フックは、ルートにマッチした URL のパラメータのキーと値のペアのオブジェクトを返します。たとえば、ルートのパスが /user/:id の場合、useParams フックは id キーと一致する URL のパラメータの値を持つオブジェクトを返します。

useParams フックの使用例を次に示します。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, useParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route path="/user/:id">
          <UserPage {...useParams()} />
        </Route>
      </Switch>
    </Router>
  );
}

function HomePage() {
  return (
    <h1>Home Page</h1>
  );
}

function UserPage({ id }) {
  return (
    <h1>User Page</h1>
    <p>User ID: {id}</p>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

このコードは、次のページをレンダリングします。

/ にアクセスすると、HomePage コンポーネントがレンダリングされます。

/user/123 にアクセスすると、UserPage コンポーネントがレンダリングされ、id プロパティに 123 の値が設定されます。

Next.js 13.3

Next.js 13.3 で、useParams フックがサポートされました。

app/example-client-component.tsx

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  console.log(params)

  return <></>
}

このフックは、現在の URL のパラメータにアクセスするために使用でき、React Router の useParams フックに基づいています。

useParams フックは、ルートにマッチした URL のパラメータのキーと値のペアのオブジェクトを返します。たとえば、ルートのパスが /user/:id の場合、useParams フックは id キーと一致する URL のパラメータの値を持つオブジェクトを返します。

useParams フックの使用例を次に示します。

import { useParams } from 'next/router';

export default function MyPage() {
  const { id } = useParams();

  return (
    <h1>User Page</h1>
    <p>User ID: {id}</p>
  );
}

このコードは、/user/123 にアクセスすると次のページをレンダリングします。

<h1>User Page</h1>
<p>User ID: 123</p>

useParams フックは、動的ルーティングを作成するために役立つ便利なツールです。

Next.js を学ぶ一覧へ