フロントエンド ルーティング

目次

• 概要
• 使用する場合
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

ナビゲーション、遅延読み込み、保護されたルート、マルチページシングルページアプリケーションのための状態管理を備えたクライアント側のルーティングを実装します。

使用する場合

• マルチページナビゲーション
• URL ベースの状態管理
• 保護/ガード付きルート
• コンポーネントの遅延読み込み
• クエリパラメータの処理

クイックスタート

最小限の動作例:

// App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { NotFound } from './pages/NotFound';
import { useAuth } from './hooks/useAuth';
import React from 'react';

// Lazy loaded components
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const UserProfile = React.lazy(() => import('./pages/UserProfile'));
const Settings = React.lazy(() => import('./pages/Settings'));

// Protected route wrapper
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

export const App: React.FC = () => {
// ... (詳細な実装については、リファレンスガイドを参照してください)

リファレンスガイド

references/ ディレクトリ内の詳細な実装:

ベストプラクティス

✅ 推奨

• 確立されたパターンと規則に従う
• クリーンで保守性の高いコードを書く
• 適切なドキュメントを追加する
• デプロイ前に十分なテストを実施する

❌ 非推奨

• テストまたは検証をスキップする
• エラーハンドリングを無視する
• 設定値をハードコードする