react-router-declarative-mode

React Router 宣言的モード

宣言的モードは、ローダーやアクションなどのデータ読み込み機能を使わずに、クライアントサイドの基本的なルーティングを行うための、React Router の最もシンプルなモードです。<BrowserRouter>、<Routes>、<Route> を使用します。

適用する場面

• ルーティングに <BrowserRouter> を使用する
• <Routes> と <Route> でルートを設定する
• <Link>、<NavLink>、または useNavigate で移動する
• useParams で URL パラメーターを読み取る
• useSearchParams で検索パラメーターを扱う
• useLocation でロケーションにアクセスする

リファレンス

特定の API や概念について詳しく知るには、該当するリファレンスを参照してください。

リファレンス	使用する場面
references/routing.md	ルート、ネストされたルート、動的パラメーターの設定
references/navigation.md	リンク、NavLink のアクティブ状態、プログラムによる移動
references/url-values.md	パラメーター、検索パラメーター、ロケーションの読み取り

重要なパターン

以下は、特に重要なパターンです。詳細については、該当するリファレンスを参照してください。

基本的なルート設定

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

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