npx create-react-router@latest --template remix-run/react-router/tutorials/address-book

# アプリのディレクトリに移動
cd {アプリを置いた場所}
 
# まだインストールしていない場合は依存関係をインストール
npm install
 
# サーバーを起動
npm run dev

mkdir app/routes
touch app/routes/contact.tsx

import type { RouteConfig } from "@react-router/dev/routes";
import { route } from "@react-router/dev/routes";
 
export default [
  route("contacts/:contactId", "routes/contact.tsx"),
] satisfies RouteConfig;

import { Form } from "react-router";
 
import type { ContactRecord } from "../data";
 
export default function Contact() {
  const contact = {
    first: "Your",
    last: "Name",
    avatar: "https://placecats.com/200/200",
    twitter: "your_handle",
    notes: "Some notes",
    favorite: true,
  };
 
  return (
    <div id="contact">
      <div>
        <img
          alt={`${contact.first} ${contact.last} avatar`}
          key={contact.avatar}
          src={contact.avatar}
        />
      </div>
 
      <div>
        <h1>
          {contact.first || contact.last ? (
            <>
              {contact.first} {contact.last}
            </>
          ) : (
            <i>No Name</i>
          )}
          <Favorite contact={contact} />
        </h1>
 
        {contact.twitter ? (
          <p>
            <a
              href={`https://twitter.com/${contact.twitter}`}
            >
              {contact.twitter}
            </a>
          </p>
        ) : null}
 
        {contact.notes ? <p>{contact.notes}</p> : null}
 
        <div>
          <Form action="edit">
            <button type="submit">Edit</button>
          </Form>
 
          <Form
            action="destroy"
            method="post"
            onSubmit={(event) => {
              const response = confirm(
                "Please confirm you want to delete this record."
              );
              if (!response) {
                event.preventDefault();
              }
            }}
          >
            <button type="submit">Delete</button>
          </Form>
        </div>
      </div>
    </div>
  );
}
 
function Favorite({
  contact,
}: {
  contact: Pick<ContactRecord, "favorite">;
}) {
  const favorite = contact.favorite;
 
  return (
    <Form method="post">
      <button
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </Form>
  );
}

import {
  Form,
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
} from "react-router";
 
// 既存のインポートとエクスポート
 
export default function App() {
  return (
    <>
      <div id="sidebar">{/* その他の要素 */}</div>
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

import {
  Form,
  Link,
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
} from "react-router";
 
// 既存のインポートとエクスポート
 
export default function App() {
  return (
    <>
      <div id="sidebar">
        {/* その他の要素 */}
        <nav>
          <ul>
            <li>
              <Link to={`/contacts/1`}>あなたの名前</Link>
            </li>
            <li>
              <Link to={`/contacts/2`}>あなたの友達</Link>
            </li>
          </ul>
        </nav>
      </div>
      {/* その他の要素 */}
    </>
  );
}

// 既存のインポート
import { getContacts } from "./data";
 
// 既存のエクスポート
 
export async function clientLoader() {
  const contacts = await getContacts();
  return { contacts };
}
 
export default function App({ loaderData }) {
  const { contacts } = loaderData;
 
  return (
    <>
      <div id="sidebar">
        {/* その他の要素 */}
        <nav>
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <Link to={`contacts/${contact.id}`}>
                    {contact.first || contact.last ? (
                      <>
                        {contact.first} {contact.last}
                      </>
                    ) : (
                      <i>名前なし</i>
                    )}
                    {contact.favorite ? (
                      <span>★</span>
                    ) : null}
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <p>
              <i>コンタクトなし</i>
            </p>
          )}
        </nav>
      </div>
      {/* その他の要素 */}
    </>
  );
}

// 既存のインポート
import type { Route } from "./+types/root";
// 既存のインポートとエクスポート
 
export default function App({
  loaderData,
}: Route.ComponentProps) {
  const { contacts } = loaderData;
 
  // 既存のコード
}

import { type Config } from "@react-router/dev/config";
 
export default {
  ssr: false,
} satisfies Config;

// 既存のインポートとエクスポート
 
export function HydrateFallback() {
  return (
    <div id="loading-splash">
      <div id="loading-splash-spinner" />
      <p>読み込み中、しばらくお待ちください...</p>
    </div>
  );
}

touch app/routes/home.tsx

import type { RouteConfig } from "@react-router/dev/routes";
import { index, route } from "@react-router/dev/routes";
 
export default [
  index("routes/home.tsx"),
  route("contacts/:contactId", "routes/contact.tsx"),
] satisfies RouteConfig;

export default function Home() {
  return (
    <p id="index-page">
      これは React Router のデモです。
      <br />
      <a href="https://reactrouter.com">
        reactrouter.com のドキュメント
      </a>
      をご覧ください。
    </p>
  );
}

touch app/routes/about.tsx

export default [
  index("routes/home.tsx"),
  route("contacts/:contactId", "routes/contact.tsx"),
  route("about", "routes/about.tsx"),
] satisfies RouteConfig;

import { Link } from "react-router";
 
export default function About() {
  return (
    <div id="about">
      <Link to="/">← デモへ移動</Link>
      <h1>React Router Contactsについて</h1>
 
      <div>
        <p>
          これは、動的ルーティング、ネストされたルート、ローダー、アクションなど、React Routerの強力な機能のいくつかを紹介するデモアプリケーションです。
        </p>
 
        <h2>機能</h2>
        <p>
          React Routerがどのように処理するかをデモで確認してください。
        </p>
        <ul>
          <li>
            ローダーとアクションによるデータのロードと変更
          </li>
          <li>
            親子関係によるネストされたルーティング
          </li>
          <li>動的なセグメントによるURLベースのルーティング</li>
          <li>保留中および楽観的なUI</li>
        </ul>
 
        <h2>詳細</h2>
        <p>
          React Routerで優れたWebアプリケーションを構築する方法の詳細については、公式ドキュメント（
          <a href="https://reactrouter.com">
            reactrouter.com
          </a>
          ）をご覧ください。
        </p>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <>
      <div id="sidebar">
        <h1>
          <Link to="about">React Router Contacts</Link>
        </h1>
        {/* other elements */}
      </div>
      {/* other elements */}
    </>
  );
}

mkdir app/layouts
touch app/layouts/sidebar.tsx

import { Outlet } from "react-router";
 
export default function SidebarLayout() {
  return <Outlet />;
}

import type { RouteConfig } from "@react-router/dev/routes";
import {
  index,
  layout,
  route,
} from "@react-router/dev/routes";
 
export default [
  layout("layouts/sidebar.tsx", [
    index("routes/home.tsx"),
    route("contacts/:contactId", "routes/contact.tsx"),
  ]),
  route("about", "routes/about.tsx"),
] satisfies RouteConfig;

import { Form, Link, Outlet } from "react-router";
import { getContacts } from "../data";
import type { Route } from "./+types/sidebar";
 
export async function clientLoader() {
  const contacts = await getContacts();
  return { contacts };
}
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts } = loaderData;
 
  return (
    <>
      <div id="sidebar">
        <h1>
          <Link to="about">React Router Contacts</Link>
        </h1>
        <div>
          <Form id="search-form" role="search">
            <input
              aria-label="Search contacts"
              id="q"
              name="q"
              placeholder="Search"
              type="search"
            />
            <div
              aria-hidden
              hidden={true}
              id="search-spinner"
            />
          </Form>
          <Form method="post">
            <button type="submit">New</button>
          </Form>
        </div>
        <nav>
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <Link to={`contacts/${contact.id}`}>
                    {contact.first || contact.last ? (
                      <>
                        {contact.first} {contact.last}
                      </>
                    ) : (
                      <i>No Name</i>
                    )}
                    {contact.favorite ? (
                      <span>★</span>
                    ) : null}
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <p>
              <i>No contacts</i>
            </p>
          )}
        </nav>
      </div>
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

// existing imports and exports
 
export default function App() {
  return <Outlet />;
}

import { type Config } from "@react-router/dev/config";
 
export default {
  ssr: false,
  prerender: ["/about"],
} satisfies Config;

export default {
  ssr: true,
  prerender: ["/about"],
} satisfies Config;

// 既存のインポート
 
export async function loader() {
  const contacts = await getContacts();
  return { contacts };
}

// 既存のインポート
import { getContact } from "../data";
import type { Route } from "./+types/contact";
 
export async function loader({ params }: Route.LoaderArgs) {
  const contact = await getContact(params.contactId);
  return { contact };
}
 
export default function Contact({
  loaderData,
}: Route.ComponentProps) {
  const { contact } = loaderData;
 
  // 既存のコード
}
 
// 既存のコード

// 既存のインポート
 
export async function loader({ params }: Route.LoaderArgs) {
  const contact = await getContact(params.contactId);
  if (!contact) {
    throw new Response("Not Found", { status: 404 });
  }
  return { contact };
}
 
// 既存のコード

// 既存のインポート
 
import { createEmptyContact } from "./data";
 
export async function action() {
  const contact = await createEmptyContact();
  return { contact };
}
 
// 既存のコード

touch app/routes/edit-contact.tsx

export default [
  layout("layouts/sidebar.tsx", [
    index("routes/home.tsx"),
    route("contacts/:contactId", "routes/contact.tsx"),
    route(
      "contacts/:contactId/edit",
      "routes/edit-contact.tsx"
    ),
  ]),
  route("about", "routes/about.tsx"),
] satisfies RouteConfig;

import { Form } from "react-router";
import type { Route } from "./+types/edit-contact";
 
import { getContact } from "../data";
 
export async function loader({ params }: Route.LoaderArgs) {
  const contact = await getContact(params.contactId);
  if (!contact) {
    throw new Response("Not Found", { status: 404 });
  }
  return { contact };
}
 
export default function EditContact({
  loaderData,
}: Route.ComponentProps) {
  const { contact } = loaderData;
 
  return (
    <Form key={contact.id} id="contact-form" method="post">
      <p>
        <span>名前</span>
        <input
          aria-label="名"
          defaultValue={contact.first}
          name="first"
          placeholder="名"
          type="text"
        />
        <input
          aria-label="姓"
          defaultValue={contact.last}
          name="last"
          placeholder="姓"
          type="text"
        />
      </p>
      <label>
        <span>Twitter</span>
        <input
          defaultValue={contact.twitter}
          name="twitter"
          placeholder="@jack"
          type="text"
        />
      </label>
      <label>
        <span>アバター URL</span>
        <input
          aria-label="アバター URL"
          defaultValue={contact.avatar}
          name="avatar"
          placeholder="https://example.com/avatar.jpg"
          type="text"
        />
      </label>
      <label>
        <span>メモ</span>
        <textarea
          defaultValue={contact.notes}
          name="notes"
          rows={6}
        />
      </label>
      <p>
        <button type="submit">保存</button>
        <button type="button">キャンセル</button>
      </p>
    </Form>
  );
}

import { Form, redirect } from "react-router";
// 既存のインポート
 
import { getContact, updateContact } from "../data";
 
export async function action({
  params,
  request,
}: Route.ActionArgs) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
}
 
// 既存のコード

<input
  aria-label="First name"
  defaultValue={contact.first}
  name="first"
  placeholder="First"
  type="text"
/>

export const action = async ({
  params,
  request,
}: ActionFunctionArgs) => {
  const formData = await request.formData();
  const firstName = formData.get("first");
  const lastName = formData.get("last");
  // ...
};

const updates = Object.fromEntries(formData);
updates.first; // "Some"
updates.last; // "Name"

export async function action({
  params,
  request,
}: Route.ActionArgs) {
  invariant(params.contactId, "Missing contactId param");
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
}

import {
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
  redirect,
} from "react-router";
// 既存のインポート
 
export async function action() {
  const contact = await createEmptyContact();
  return redirect(`/contacts/${contact.id}/edit`);
}
 
// 既存のコード

import { Form, Link, NavLink, Outlet } from "react-router";
 
// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts } = loaderData;
 
  return (
    <>
      <div id="sidebar">
        {/* 既存の要素 */}
        <ul>
          {contacts.map((contact) => (
            <li key={contact.id}>
              <NavLink
                className={({ isActive, isPending }) =>
                  isActive
                    ? "active"
                    : isPending
                    ? "pending"
                    : ""
                }
                to={`contacts/${contact.id}`}
              >
                {/* 既存の要素 */}
              </NavLink>
            </li>
          ))}
        </ul>
        {/* 既存の要素 */}
      </div>
      {/* 既存の要素 */}
    </>
  );
}

import {
  Form,
  Link,
  NavLink,
  Outlet,
  useNavigation,
} from "react-router";
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts } = loaderData;
  const navigation = useNavigation();
 
  return (
    <>
      {/* 既存の要素 */}
      <div
        className={
          navigation.state === "loading" ? "loading" : ""
        }
        id="detail"
      >
        <Outlet />
      </div>
    </>
  );
}

<Form
  action="destroy"
  method="post"
  onSubmit={(event) => {
    const response = confirm(
      "このレコードを削除してもよろしいですか？"
    );
    if (!response) {
      event.preventDefault();
    }
  }}
>
  <button type="submit">削除</button>
</Form>

touch app/routes/destroy-contact.tsx

export default [
  // 既存のルート
  route(
    "contacts/:contactId/destroy",
    "routes/destroy-contact.tsx"
  ),
  // 既存のルート
] satisfies RouteConfig;

import { redirect } from "react-router";
import type { Route } from "./+types/destroy-contact";
 
import { deleteContact } from "../data";
 
export async function action({ params }: Route.ActionArgs) {
  await deleteContact(params.contactId);
  return redirect("/");
}

import { Form, redirect, useNavigate } from "react-router";
// 既存のインポートとエクスポート
 
export default function EditContact({
  loaderData,
}: Route.ComponentProps) {
  const { contact } = loaderData;
  const navigate = useNavigate();
 
  return (
    <Form key={contact.id} id="contact-form" method="post">
      {/* 既存の要素 */}
      <p>
        <button type="submit">保存</button>
        <button onClick={() => navigate(-1)} type="button">
          キャンセル
        </button>
      </p>
    </Form>
  );
}

// 既存のインポートとエクスポート
 
export async function loader({
  request,
}: Route.LoaderArgs) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return { contacts };
}
 
// 既存のコード

// 既存のインポートとエクスポート
 
export async function loader({
  request,
}: Route.LoaderArgs) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return { contacts, q };
}
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts, q } = loaderData;
  const navigation = useNavigation();
 
  return (
    <>
      <div id="sidebar">
        {/* 既存の要素 */}
        <div>
          <Form id="search-form" role="search">
            <input
              aria-label="連絡先を検索"
              defaultValue={q || ""}
              id="q"
              name="q"
              placeholder="検索"
              type="search"
            />
            {/* 既存の要素 */}
          </Form>
          {/* 既存の要素 */}
        </div>
        {/* 既存の要素 */}
      </div>
      {/* 既存の要素 */}
    </>
  );
}

// 既存のインポート
import { useEffect } from "react";
 
// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts, q } = loaderData;
  const navigation = useNavigation();
 
  useEffect(() => {
    const searchField = document.getElementById("q");
    if (searchField instanceof HTMLInputElement) {
      searchField.value = q || "";
    }
  }, [q]);
 
  // 既存のコード
}

import {
  Form,
  Link,
  NavLink,
  Outlet,
  useNavigation,
  useSubmit,
} from "react-router";
// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts, q } = loaderData;
  const navigation = useNavigation();
  const submit = useSubmit();
 
  // 既存のコード
 
  return (
    <>
      <div id="sidebar">
        {/* 既存の要素 */}
        <div>
          <Form
            id="search-form"
            onChange={(event) =>
              submit(event.currentTarget)
            }
            role="search"
          >
            {/* 既存の要素 */}
          </Form>
          {/* 既存の要素 */}
        </div>
        {/* 既存の要素 */}
      </div>
      {/* 既存の要素 */}
    </>
  );
}

// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  const { contacts, q } = loaderData;
  const navigation = useNavigation();
  const submit = useSubmit();
  const searching =
    navigation.location &&
    new URLSearchParams(navigation.location.search).has(
      "q"
    );
 
  // 既存のコード
}

// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  // 既存のコード
 
  return (
    <>
      <div id="sidebar">
        {/* 既存の要素 */}
        <div>
          <Form
            id="search-form"
            onChange={(event) =>
              submit(event.currentTarget)
            }
            role="search"
          >
            <input
              aria-label="連絡先を検索"
              className={searching ? "loading" : ""}
              defaultValue={q || ""}
              id="q"
              name="q"
              placeholder="検索"
              type="search"
            />
            <div
              aria-hidden
              hidden={!searching}
              id="search-spinner"
            />
          </Form>
          {/* 既存の要素 */}
        </div>
        {/* 既存の要素 */}
      </div>
      {/* 既存の要素 */}
    </>
  );
}

// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  // 既存のコード
 
  return (
    <>
      {/* 既存の要素 */}
      <div
        className={
          navigation.state === "loading" && !searching
            ? "loading"
            : ""
        }
        id="detail"
      >
        <Outlet />
      </div>
      {/* 既存の要素 */}
    </>
  );
}

// 既存のインポートとエクスポート
 
export default function SidebarLayout({
  loaderData,
}: Route.ComponentProps) {
  // 既存のコード
 
  return (
    <>
      <div id="sidebar">
        {/* 既存の要素 */}
        <div>
          <Form
            id="search-form"
            onChange={(event) => {
              const isFirstSearch = q === null;
              submit(event.currentTarget, {
                replace: !isFirstSearch,
              });
            }}
            role="search"
          >
            {/* 既存の要素 */}
          </Form>
          {/* 既存の要素 */}
        </div>
        {/* 既存の要素 */}
      </div>
      {/* 既存の要素 */}
    </>
  );
}

import { Form, useFetcher } from "react-router";
 
// 既存のインポートとエクスポート
 
function Favorite({
  contact,
}: {
  contact: Pick<ContactRecord, "favorite">;
}) {
  const fetcher = useFetcher();
  const favorite = contact.favorite;
 
  return (
    <fetcher.Form method="post">
      <button
        aria-label={
          favorite
            ? "お気に入りから削除"
            : "お気に入りに追加"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </fetcher.Form>
  );
}

// 既存のインポート
import { getContact, updateContact } from "../data";
// 既存のインポート
 
export async function action({
  params,
  request,
}: Route.ActionArgs) {
  const formData = await request.formData();
  return updateContact(params.contactId, {
    favorite: formData.get("favorite") === "true",
  });
}
 
// 既存のコード

// 既存のコード
 
function Favorite({
  contact,
}: {
  contact: Pick<ContactRecord, "favorite">;
}) {
  const fetcher = useFetcher();
  const favorite = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : contact.favorite;
 
  return (
    <fetcher.Form method="post">
      <button
        aria-label={
          favorite
            ? "お気に入りから削除"
            : "お気に入りに追加"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </fetcher.Form>
  );
}