create-react-router で作成した React v19 アプリケーションにページ遷移を実装する

# Next.js (App Router)
npx create-next-app@latest

# React Router (v7)
npx create-react-router@latest

# Expo (ネイティブアプリ用)
npx create-expo-app@latest

$ npx create-react-router@latest

         create-react-router v7.6.0

   dir   Where should we create your new project?
         ./my-react-router-app

      ◼  Using default template See https://github.com/remix-run/react-router-templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./my-react-router-app
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

cd my-react-router-app

$ tree -I ".react-router|node_modules"
.
├── app
│   ├── app.css
│   ├── root.tsx
│   ├── routes
│   │   └── home.tsx
│   ├── routes.ts
│   └── welcome
│       ├── logo-dark.svg
│       ├── logo-light.svg
│       └── welcome.tsx
├── Dockerfile
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── react-router.config.ts
├── README.md
├── tsconfig.json
└── vite.config.ts

$ npm ls
cdk_sample_app@0.1.0 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app
└─┬ my-react-router-app@ -> ./my-react-router-app
  ├── @react-router/dev@7.6.0
  ├── @react-router/node@7.6.0
  ├── @react-router/serve@7.6.0
  ├── @tailwindcss/vite@4.1.7
  ├── @types/node@20.17.50
  ├── @types/react-dom@19.1.5
  ├── @types/react@19.1.5
  ├── isbot@5.1.28
  ├── react-dom@19.1.0
  ├── react-router@7.6.0
  ├── react@19.1.0
  ├── tailwindcss@4.1.7
  ├── typescript@5.8.3
  ├── vite-tsconfig-paths@5.1.4
  └── vite@6.3.5

npm run dev

touch app/routes/welcome.tsx

import { Welcome } from "../welcome/welcome";

export const meta = () => {
  return [
    { title: "Welcome - React Router App" },
    { name: "description", content: "Welcome page of our React Router app" },
  ];
};

const WelcomePage = () => {
  return <Welcome />;
};

export default WelcomePage;

import type { Route } from "./+types/home";
import { Link } from "react-router";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

const Home = () => {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Home Page</h1>
      <p className="mb-4">Welcome to our React Router application!</p>

      <Link to="/welcome" className="text-blue-500 hover:underline">
        Go to Welcome Page
      </Link>
    </div>
  );
};

export default Home;

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("welcome", "routes/welcome.tsx")
] satisfies RouteConfig;

import { Link } from "react-router";

export const meta = () => {
  return [
    { title: "404 - Page Not Found" },
    { name: "description", content: "Page not found" },
  ];
};

const NotFound = () => {
  return (
    <div className="p-4 text-center">
      <h1 className="text-2xl font-bold mb-2">404 - Page Not Found</h1>
      <p className="mb-4">The page you're looking for doesn't exist.</p>
      <Link to="/" className="text-blue-500 hover:underline">
        Return to Home
      </Link>
    </div>
  );
};

export default NotFound;

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("welcome", "routes/welcome.tsx"),
  route("*", "routes/not-found.tsx"), // 404ページのルートを最後に追加（ワイルドカードパスを使用）
] satisfies RouteConfig;