React Router v7 触ってみる

tree

.
├── Dockerfile
├── Dockerfile.bun
├── Dockerfile.pnpm
├── README.md
├── app
│   ├── app.css
│   ├── root.tsx
│   ├── routes
│   │   └── home.tsx
│   ├── routes.ts
│   └── welcome
│       ├── logo-dark.svg
│       ├── logo-light.svg
│       └── welcome.tsx
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── react-router.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

最初からDocker構成も入ってるんだ

tockii

app 配下に root, routes.ts, routes dir があるのちょっとわかりづらい

tockii

route の設定

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

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),

  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
    route("trending", "./concerts/trending.tsx"),
  ]),
] satisfies RouteConfig;

ここで反映する layoutを指定できるんだ、わかりやすい

ディレクトリ・ファイル名の規則でRoot指定したい場合は別の設定が必要

tockii

nested route は親コンポーネントに指定した Outletから子コンポーネントが出力される。
ルート付きのLayoutみたいな感じかな？

export default [
  index('./routes/home.tsx'),
  route('dashboard', './routes/dashboard.tsx', [
    // child routes
    route('about', './routes/dashboard/about.tsx'),
  ]),

/dashboard/aboutで dashboard の Outlet から about が出力される。

tockii

prefix route は第一引数のルート配下に単純に組み込まれる

export default [
  index('./routes/home.tsx'),
  ...prefix('dashboard', [route('about', './routes/about.tsx')]),
] satisfies RouteConfig;

tockii

loader > clientLoader > component


export function loader() {
  return {
    message: 'Hello from about loader',
  };
}

export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
  const serverLoaderData = await serverLoader();
  console.log(serverLoaderData);
  return {
    message: 'Hello from about client loader',
    loaderMessage: serverLoaderData?.message,
  };
}

export default function Home({ loaderData }) {
  return (
    <div>
      <p>{loaderData.message}</p>
      <p>{loaderData.loaderMessage}</p>
    </div>
  );
}

この場合はコンポーネントに来る値は clientLoaderなんだ

型はどうやって取るんだ？

ザクザクっとあとは読むだけだけどなんとなく読み終わり。あとは使うタイミング作る