ルーティング

ルートの設定

ルートは、URLセグメントとUI要素を関連付ける <Routes> と <Route> をレンダリングすることで設定されます。

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";
 
const root = document.getElementById("root");
 
ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>,
);

より大きなサンプル設定を次に示します。

<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
 
  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>
 
  <Route path="concerts">
    <Route index element={<ConcertsHome />} />
    <Route path=":city" element={<City />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

ネストされたルート

ルートは、親ルート内にネストできます。

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

親のパスは自動的に子に含まれるため、この設定では "/dashboard" と "/dashboard/settings" の両方のURLが作成されます。

子ルートは、親ルートの <Outlet/> を介してレンダリングされます。

app/dashboard.tsx

import { Outlet } from "react-router";
 
export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* will either be <Home/> or <Settings/> */}
      <Outlet />
    </div>
  );
}

レイアウトルート

path なしのルートは、その子に対して新しいネストを作成しますが、URLにセグメントを追加しません。

<Routes>
  <Route element={<MarketingLayout />}>
    <Route index element={<MarketingHome />} />
    <Route path="contact" element={<Contact />} />
  </Route>
 
  <Route path="projects">
    <Route index element={<ProjectsHome />} />
    <Route element={<ProjectsLayout />}>
      <Route path=":pid" element={<Project />} />
      <Route path=":pid/edit" element={<EditProject />} />
    </Route>
  </Route>
</Routes>

インデックスルート

インデックスルートは、親のURLで親の <Outlet/> にレンダリングされます（デフォルトの子ルートのように）。これらは index プロパティで構成されます。

<Routes>
  <Route path="/" element={<Root />}>
    {/* renders into the outlet in <Root> at "/" */}
    <Route index element={<Home />} />
 
    <Route path="dashboard" element={<Dashboard />}>
      {/* renders into the outlet in <Dashboard> at "/dashboard" */}
      <Route index element={<DashboardHome />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  </Route>
</Routes>

インデックスルートには子を含めることはできません。その動作を期待している場合は、レイアウトルートが必要になる可能性があります。

ルートプレフィックス

element プロパティなしの <Route path> は、親レイアウトを導入せずに、その子ルートにパスプレフィックスを追加します。

app/routes.ts

<Route path="projects">
  <Route index element={<ProjectsHome />} />
  <Route element={<ProjectsLayout />}>
    <Route path=":pid" element={<Project />} />
    <Route path=":pid/edit" element={<EditProject />} />
  </Route>
</Route>

動的セグメント

パスセグメントが : で始まる場合、それは「動的セグメント」になります。ルートがURLと一致すると、動的セグメントはURLから解析され、useParams などの他のルーターAPIに params として提供されます。

<Route path="teams/:teamId" element={<Team />} />

app/team.tsx

import { useParams } from "react-router";
 
export default function Team() {
  let params = useParams();
  // params.teamId
}

1つのルートパスに複数の動的セグメントを含めることができます。

<Route
  path="/c/:categoryId/p/:productId"
  element={<Product />}
/>

app/category-product.tsx

import { useParams } from "react-router";
 
export default function CategoryProduct() {
  let { categoryId, productId } = useParams();
  // ...
}

特定のパス内のすべての動的セグメントが一意であることを確認する必要があります。そうしないと、params オブジェクトが入力されると、後続の動的セグメントの値が以前の値を上書きします。

オプションのセグメント

セグメントの最後に ? を追加すると、ルートセグメントをオプションにすることができます。

<Route path=":lang?/categories" element={<Categories />} />

オプションの静的セグメントを含めることもできます。

<Route path="users/:userId/edit?" element={<User />} />

スプラット

「キャッチオール」および「スター」セグメントとも呼ばれます。ルートパスパターンが /* で終わる場合、他の / 文字を含む、/ に続く任意の文字と一致します。

<Route path="files/*" element={<File />} />

let params = useParams();
// params["*"] will contain the remaining URL after files/
let filePath = params["*"];

* を分割できます。新しい名前を割り当てる必要があります。一般的な名前は splat です。

let { "*": splat } = useParams();

リンク

Link と NavLink を使用して、UIからルートにリンクします。

import { NavLink, Link } from "react-router";
 
function Header() {
  return (
    <nav>
      {/* NavLink makes it easy to show active states */}
      <NavLink
        to="/"
        className={({ isActive }) =>
          isActive ? "active" : ""
        }
      >
        Home
      </NavLink>
 
      <Link to="/concerts/salt-lake-city">Concerts</Link>
    </nav>
  );
}

次へ: ナビゲーション

ルートの設定
ネストされたルート
レイアウトルート
インデックスルート
ルートプレフィックス
動的セグメント
オプションのセグメント
スプラット
リンク