React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法

import React from 'react';
import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';

const Parent = () => {
  return (
    <div>
      <h1>Parent</h1>
      <Outlet />
    </div>
  )
}

const App = () => {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <h1>Home</h1>,
    }, {
      path: "/path1",
      element: <h1>Path1</h1>,
    }, {
      path: "/parent",
      element: <Parent />,
      children: [
        {
          path: "child",
          element: <h2>Child</h2>
        }
      ]
    }
  ]);
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  )
};

export default App;

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path="/" element={<h1>Home</h1>} />
      <Route path="/path1" element={<h1>Path1</h1>} />
      <Route path="/parent" element={<Parent />}>
        <Route path="child" element={<h2>Child</h2>} />
      </Route>
    </Route>
  )
);

<Route
  path="/"
  element={<h1>Home</h1>}
  loader={async () => {
    // ルーティング時の処理
  }}
  action={async () => {
    // フォーム送信の際の処理
  }}
/>

<Route path="/" element={<Home />} loader={homeLoader} />

import React from 'react'
import { redirect, useLoaderData } from 'react-router';

export const homeLoader = async () => {
  const user = await checkAuthStatus(); //認証情報を取得
  if (!user) return redirect("/login") //認証されていなかったらリダイレクト
  return { user }
}
export const Home = () => {
  const { user } = useLoaderData() //userを取得する
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome, {user.name}!</p>
    </div>
  )
}

<Route path="/login" element={<Login />} action={loginAction} />

import { Form, redirect, useActionData } from 'react-router-dom'

export const loginAction = async ({ request }) => {
  // フォームデータを取得
  const formData = await request.formData();
  const email = formData.get("email")
  const password = formData.get("password")
  try {
    //認証の処理 (email, password) => boolean
    const isAuth = await isCheckLogin(email, password);
    //認証成功時: ルートにリダイレクト
    if (isAuth) return redirect("/")
    return { error: "Invalid credentials" };
  } catch (error) {
    return { error: "Login failed. Please try again." };
  }
}
export const Login = () => {
  // アクションからのデータ（エラーメッセージなど）を取得
  const actionData = useActionData();
  return (
    <div>
      <h1>Login</h1>
      {/* Formコンポーネントを使用する */}
      <Form method='post'>
        <div>
          <input type="email" name='email' />
        </div>
        <div>
          <input type="password" name='password' />
        </div>
        {actionData?.error && <p style={{ color: 'red' }}>{actionData.error}</p>}
        <button type="submit">Submit</button>
      </Form>
    </div>
  )
}

<Route path="/articles">
  <Route path=":articleId" element={<Article />} loader={articleLoader} />
</Route>

import { Suspense } from "react";
import { Await, defer, useLoaderData } from "react-router";

const fetchArticle = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "article1" });
    }, 1000);
  });
};
const fetchComment = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ title: "test comment" });
    }, 3000);
  });
};

export const articleLoader = async ({ params }) => {
  return defer({
    commentPromise: fetchComment(params.articleId),
    article: await fetchArticle(params.articleId),
  });
};

export const Article = () => {
  const { article } = useLoaderData();
  return (
    <div>
      <h1>{article.name}</h1>
      <Comment />
    </div>
  );
};

const Comment = () => {
  const { commentPromise } = useLoaderData();
  return (
    <Suspense fallback={<p>Loading comment...</p>}>
      <Await resolve={commentPromise}>{(comment) => <h1>{comment.title}</h1>}</Await>
    </Suspense>
  );
};

const { articleId } = useParams();

export const articleLoader = async ({ params, request }) => {
  const url = new URL(request.url);
  const lang = url.searchParams.get("lang");
  return defer({
    commentPromise: fetchComment(params.articleId, lang),
    article: await fetchArticle(params.articleId, lang), //langにenが入っていたら英語の記事を取得
  });
};

export const Article = () => {
  const { article } = useLoaderData();
  const [searchParams, setSearchParams] = useSearchParams();
  const fontSize = searchParams.get("fontsize") ?? 1;
  return (
    <div style={{ fontSize: Number(fontSize) + "rem" }}>
      <h1>{article.name}</h1>
      <Comment />
    </div>
  );
};

const Comment = () => {
  const { commentPromise } = useLoaderData();
  return (
    <Suspense fallback={<p>Loading comment...</p>}>
      <Await resolve={commentPromise}>{(comment) => <h1>{comment.title}</h1>}</Await>
    </Suspense>
  );
};