Remix v3 — React Router v7과 통합

Remix + React Router 통합

Remix v3은 React Router v7에 통합되었습니다. 하나의 라이브러리로 SPA와 SSR을 모두 지원합니다.

프레임워크 모드

// react-router.config.ts
import { type Config } from "@react-router/dev/config";

export default {
  ssr: true,
  future: { unstable_optimizeDeps: true },
} satisfies Config;

라우트 정의

// routes/posts.tsx
import { Route } from "./+types/posts";

export async function loader({ request }: Route.LoaderArgs) {
  const posts = await db.post.findMany();
  return { posts };
}

export default function Posts({ loaderData }: Route.ComponentProps) {
  return loaderData.posts.map(p => <div key={p.id}>{p.title}</div>);
}