RouterProviderを使ったReact Router設定完全ガイド

npm install react-router-dom

import { createBrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

import { RouterProvider } from "react-router-dom";
import React from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  return <RouterProvider router={router} />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// ページコンポーネント
const Home = () => <h1>ホームページ</h1>;
const About = () => <h1>アバウトページ</h1>;

// ルートの定義
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

// アプリ全体をRouterProviderで包む
const App = () => {
  return <RouterProvider router={router} />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";

// ページコンポーネント
const Dashboard = () => (
  <div>
    <h1>ダッシュボード</h1>
    <Outlet /> {/* 子ルートを表示 */}
  </div>
);

const Profile = () => <h2>プロファイルページ</h2>;
const Settings = () => <h2>設定ページ</h2>;

// ルート定義
const router = createBrowserRouter([
  {
    path: "/dashboard",
    element: <Dashboard />,
    children: [
      {
        path: "profile",
        element: <Profile />,
      },
      {
        path: "settings",
        element: <Settings />,
      },
    ],
  },
]);

// アプリ全体をRouterProviderで包む
const App = () => <RouterProvider router={router} />;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

const UserDetails = ({ params }) => <h2>ユーザーID: {params.userId}</h2>;

const router = createBrowserRouter([
  {
    path: "/users/:userId",
    element: <UserDetails />,
  },
]);

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// ページコンポーネント
const Home = () => <h1>ホームページ</h1>;
const About = () => <h1>アバウトページ</h1>;
const ErrorPage = () => <h1>エラー: ページが見つかりません</h1>;

// ルートの定義
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "*", // 未定義のルートをキャッチ
    element: <ErrorPage />,
  },
]);

// アプリ全体をRouterProviderで包む
const App = () => <RouterProvider router={router} />;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// エラーページ
const ErrorPage = ({ error }) => (
  <div>
    <h1>エラー発生</h1>
    <p>{error.message}</p>
  </div>
);

// データフェッチ関数
const fetchData = async () => {
  const response = await fetch("https://api.example.com/data");
  if (!response.ok) {
    throw new Error("データ取得に失敗しました");
  }
  return response.json();
};

// ページコンポーネント
const DataPage = async () => {
  const data = await fetchData();
  return <h1>データ: {JSON.stringify(data)}</h1>;
};

// ルート定義
const router = createBrowserRouter([
  {
    path: "/data",
    element: <DataPage />,
    errorElement: <ErrorPage />, // エラー発生時に表示
  },
]);

const App = () => <RouterProvider router={router} />;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

import React, { createContext, useContext, useState } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Outlet, Navigate } from "react-router-dom";

// ユーザー認証コンテキスト
const AuthContext = createContext(null);

const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = () => useContext(AuthContext);

// 保護されたルート
const ProtectedRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? children : <Navigate to="/" />;
};

// ページコンポーネント
const Home = () => <h1>ホームページ</h1>;
const Dashboard = () => <h1>ダッシュボード（認証済み）</h1>;
const Login = () => {
  const { setIsAuthenticated } = useAuth();
  return (
    <div>
      <h1>ログインページ</h1>
      <button onClick={() => setIsAuthenticated(true)}>ログイン</button>
    </div>
  );
};

// ルート定義
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/dashboard",
    element: (
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    ),
  },
]);

const App = () => (
  <AuthProvider>
    <RouterProvider router={router} />
  </AuthProvider>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

import { useSelector, useDispatch } from "react-redux";

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  return isAuthenticated ? children : <Navigate to="/" />;
};

import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Link, useParams, useNavigate } from "react-router-dom";

// ダミーデータ
const initialTasks = [
  { id: 1, title: "タスク1", description: "タスク1の詳細" },
  { id: 2, title: "タスク2", description: "タスク2の詳細" },
];

// ホームページ（タスク一覧）
const Home = ({ tasks }) => (
  <div>
    <h1>タスク一覧</h1>
    {tasks.map((task) => (
      <div key={task.id}>
        <Link to={`/tasks/${task.id}`}>{task.title}</Link>
      </div>
    ))}
    <Link to="/tasks/new">新しいタスクを追加</Link>
  </div>
);

// タスク詳細ページ
const TaskDetail = ({ tasks }) => {
  const { taskId } = useParams();
  const task = tasks.find((task) => task.id === parseInt(taskId));
  return (
    <div>
      <h1>{task?.title || "タスクが見つかりません"}</h1>
      <p>{task?.description}</p>
      <Link to="/">戻る</Link>
    </div>
  );
};

// 新規作成ページ
const NewTask = ({ onAddTask }) => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    onAddTask({ id: Date.now(), title, description });
    navigate("/");
  };

  return (
    <div>
      <h1>新しいタスクを追加</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>タイトル</label>
          <input value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>詳細</label>
          <textarea value={description} onChange={(e) => setDescription(e.target.value)} />
        </div>
        <button type="submit">追加</button>
      </form>
    </div>
  );
};

// アプリコンポーネント
const App = () => {
  const [tasks, setTasks] = useState(initialTasks);

  const addTask = (newTask) => {
    setTasks([...tasks, newTask]);
  };

  const router = createBrowserRouter([
    { path: "/", element: <Home tasks={tasks} /> },
    { path: "/tasks/new", element: <NewTask onAddTask={addTask} /> },
    { path: "/tasks/:taskId", element: <TaskDetail tasks={tasks} /> },
  ]);

  return <RouterProvider router={router} />;
};

// レンダリング
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);