React Router `useParams`の使い方

背景

下記の記事で説明できなかったuseParamsについてです

やったこと

useParamsを用いて、動的なパラメータを取得して表示しています

コード

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

// App.jsx
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import { Page1 } from './Page1.jsx';

function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* このリンクから遷移する */}
        <Link to="/page1/1">page1-1</Link>
        <br />
        {/* このリンクから遷移する */}
        <Link to="/page1/2">page1-2</Link>
      </nav>
      <Routes>
        <Route path="/page1/:id" element={<Page1 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// Page1.jsx
import { useParams } from 'react-router-dom';

export const Page1 = () => {
  const { id } = useParams(); //ここで使っています

  return (
    <>
      <div>
        <h1>Page1です</h1>
        {/* 表示はここ */}
        <p>URLのIdは{id}です</p>
      </div>
    </>
  );
};

useParamsを用いて、動的なパラメータを取得して表示

useParamsとは？

Returns an object of key/value-pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.

現在のURLからルートに一致した動的パラメータのキー/値ペアのオブジェクトを返します。子ルートは親ルートからすべてのパラメータを継承します。

useParamsは

• URL のパスに含まれている「動的な部分（パラメータ）」を取得するためのフック
• キー/値のペアオブジェクトを返す
• 子ルートは親ルートのパラメータを継承

使い方とか

<Route path="/page1/:id" element={<Page1 />} />

呼び出し側・ルート定義の方法はこんな感じです
pathで動的に表現したい部分を/:idとしています

<Link to="/page1/1">page1-1</Link>
<Link to="/page1/2">page1-2</Link>

Linkで動的な部分をこのように指定してあげます
実際のアプリケーションでは、動的な値を指定してあげる感じでしょう

<Link to={`/page1/${id}`}>page1-{id}</Link>

そして、呼び出されるコンポーネント

// Page1.jsx
import { useParams } from 'react-router-dom';

export const Page1 = () => {
  const { id } = useParams(); //ここで使っています

  return (
    <>
      <div>
        <h1>Page1です</h1>
        {/* 表示はここ */}
        <p>URLのIdは{id}です</p>
      </div>
    </>
  );
};

const { id } = useParams();

これで:idに含まれている値を取得することができます

当たり前ですが<Link to="/page1/1">page1-1</Link>をユーザーがクリックした場合、ブラウザのURLがpage1/1となります

その中の動的セグメント:id、今回の場合/1の部分が取得できます。
{ id: "1" }という具合に

そして、URLのIdは1ですと表示されます

感想

• 詳細画面の表示とかで使えそうなイメージ

参考