Open1

React Routerを使ったルーティング設計のポイント

React
React Router
MygMyg

React Router を使ったルーティング設計のポイント

✅ 「URL設計とコンポーネントの分離を明確にする」とは？

目的： URLが意味のある構造を持ち、それに対応したコンポーネント設計を行うこと。

例：

// URL設計
/users           → ユーザー一覧
/users/:id       → ユーザー詳細
/users/:id/edit  → ユーザー編集

対応コンポーネント設計：

<Route path="/users" element={<UserList />} />
<Route path="/users/:id" element={<UserDetail />} />
<Route path="/users/:id/edit" element={<UserEdit />} />

それぞれの責務が分かれているので保守しやすく、コンポーネント間で処理を使い回す場合も分離されているとテストやデバッグがしやすくなります。

✅ 「Nested Route や Layout を使い回す」とは？

目的： ページの共通レイアウト（例：サイドバーやヘッダー）をルーティング構成の中に組み込み、効率よく管理すること。

例：

// ルート設計
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="users" element={<UserList />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

DashboardLayout にサイドバーやヘッダーを定義し、内部の各画面がその共通レイアウトの中に表示される設計です。

// DashboardLayout.tsx
return (
  <div>
    <Sidebar />
    <main>
      <Outlet />
    </main>
  </div>
)

これによりレイアウトの再利用性が高まり、見た目の一貫性や保守性が向上します。

✅ 「ページ遷移時の状態リセットやローディング処理などUX面にも配慮」

  • ページ遷移時にスクロール位置のリセットを行わないと、ユーザーが混乱することがあります。
  • また、データ取得中にローディングスピナーを表示したり、前の画面のデータが残っていたりしないよう初期化処理が必要です。

例：スクロールリセットのカスタムコンポーネント

import { useEffect } from "react"
import { useLocation } from "react-router-dom"

export const ScrollToTop = () => {
  const { pathname } = useLocation()
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [pathname])
  return null
}

✅ 「Guardの実装や useLocation、useParams を活用」

ルートガード（未ログイン時にリダイレクトなど）

const RequireAuth = ({ children }: { children: React.ReactNode }) => {
  const isAuthenticated = useAuth()
  return isAuthenticated ? children : <Navigate to="/login" />
}

<Route
  path="/dashboard"
  element={
    <RequireAuth>
      <DashboardLayout />
    </RequireAuth>
  }
/>

useParams の活用（ルートパラメータの取得）

const UserDetail = () => {
  const { id } = useParams()
  // id を元に API を叩く
}

useLocation の活用（現在のURLや検索クエリの取得）

const location = useLocation()
console.log(location.pathname)     // 現在のパス
console.log(location.search)       // ?page=2 など

✅ まとめ

React Router を使ったルーティング設計で大切にしているのは：

項目 説明
✅ URL設計 コンポーネントの責務と一致させる構造に
✅ Layoutの再利用 Nested Route と Outlet で一貫したUIを維持
✅ UXへの配慮 ローディング、スクロールリセット、状態初期化など
✅ Guard対応 認証などでルーティングを制御
✅ Hook活用 useParams, useLocation などで柔軟な実装

このように、ルーティング設計はUIの見た目だけでなく、アプリ全体の構造・体験・保守性に直結する重要な設計ポイントです。