React Router 宣言的モード

宣言的モードは React Router のシンプルなモードで、<BrowserRouter>、<Routes>、<Route> を使用した基本的なクライアント側のルーティングをサポートし、ローダーやアクションなどのデータ読み込み機能はありません。

適用時期

• <BrowserRouter> でルーティングを使用する場合
• <Routes> と <Route> でルートを設定する場合
• <Link>、<NavLink>、useNavigate でナビゲーションする場合
• useParams で URL パラメータを読み込む場合
• useSearchParams でサーチパラメータを操作する場合
• useLocation でロケーション情報にアクセスする場合

参考資料

特定の API・コンセプトについて詳細なガイダンスが必要な場合は、関連する参考資料を参照してください:

参考資料	使用時期
references/routing.md	ルート設定、ネストされたルート、動的パラメータ
references/navigation.md	Link、NavLink アクティブ状態、プログラマティックナビゲーション
references/url-values.md	パラメータ、サーチパラメータ、ロケーション読み込み

重要なパターン

これらは従うべき最も重要なパターンです。詳細については関連する参考資料を参照してください。

基本的なルート設定

JSX を使用して <Routes> と <Route> でルートを設定します:

import { BrowserRouter, Routes, Route } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="users/:userId" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

NavLink アクティブ状態

NavLink を使用してナビゲーションとアクティブスタイリングを実装します:

import { NavLink } from "react-router";

function Nav() {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        Home
      </NavLink>
      <NavLink
        to="/dashboard"
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        Dashboard
      </NavLink>
    </nav>
  );
}

URL パラメータの読み込み

useParams を使用してダイナミックなルートセグメントを読み込みます:

import { useParams } from "react-router";

function User() {
  const { userId } = useParams();
  return <h1>User {userId}</h1>;
}

サーチパラメータの操作

useSearchParams をクエリ文字列値に使用します:

import { useSearchParams } from "react-router";

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q");

  return (
    <div>
      <input
        value={query || ""}
        onChange={(e) => setSearchParams({ q: e.target.value })}
      />
      <p>Results for: {query}</p>
    </div>
  );
}

さらに詳しい情報

これらの参考資料に記載されていない React Router 関連の情報については、公式ドキュメントを参照できます:

https://reactrouter.com/docs