問題一覧に戻る
上級高度なパターンと型
問題98: 動的ルート

パラメータを使った動的ルートの作成方法を学びます。コロン構文でルートパラメータを定義し、useParamsフックでアクセスします。単一のルートで複数のパラメータを組み合わせることができます。ユーザープロフィール、商品ページ、IDによって変化するコンテンツを構築するのに必須です。

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function UserProfile() {
  {/* paramsフックを使用 */}
  const {  } = ();
  
  return <h1>User: {userId}</h1>;
}

function PostDetail() {
  {/* 複数のルートパラメータ */}
  const { category,  } = useParams();
  
  return (
    <>
      <h2>{category} - Post {postId}</h2>
      <Link to="/">Back</Link>
    </>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 動的ルートパラメータ */}
        <Route path="/user/" element={<UserProfile />} />
        {/* 複数のルートパラメータ */}
        <Route path="/blog/:/:postId" element={< />} />
        <Route path="/" element={
          <>
            <Link to="/user/123">User 123</Link>
            <Link to="/blog/tech/456">Tech Post</Link>
          </>
        } />
      </Routes>
    </BrowserRouter>
  );
}

export default App;