Claude Code com Remix e React Router: guia de loader/action

Como entender Remix em 2026

Em 2026, desenvolvimento Remix nao significa apenas manter uma aplicacao Remix v2. Muitos recursos de framework do Remix foram incorporados ao React Router v7 Framework Mode, e a documentacao oficial do Remix aponta para React Router quando o assunto e a experiencia mais recente. Isso muda a forma de pedir ajuda ao Claude Code. Se o prompt disser apenas “faca em Remix”, o resultado pode misturar imports antigos de@remix-run/*, imports novos dereact-router e chamadasfetch feitas no cliente.

Para iniciantes, a explicacao e direta: o estilo Remix colocaloader eaction no nivel da rota, aproximando servidor e interface. Oloader le dados antes da pagina renderizar. Aaction processa formularios e mutacoes. O componente renderiza a UI, e a propria rota pode conter limite de erro e SEO. Assim, voce pode pedir ao Claude Code para revisar uma rota inteira: leitura, escrita, estados de usuario, erros e snippet de busca.

Este guia cria uma mini aplicacao React Router v7 Framework Mode com lista de produtos, detalhe de produto e formulario de contato. Os exemplos cobrem tres casos: buscar dados comloader, processar formulario comaction e conter falhas comErrorBoundary. Tambem ha prompt de revisao, armadilhas comuns, links internos e CTA para treinamento/produtos. As fontes oficiais verificadas foram Remix Docs, React Router v7, Route Module docs, Error Boundaries e Form API.

flowchart LR
  A["URL / route"] --> B["loader le dados"]
  B --> C["UI component"]
  C --> D["Form envia"]
  D --> E["action valida e grava"]
  E --> B
  B --> F["ErrorBoundary"]
  E --> F

Defina o modo antes do codigo

React Router v7 pode ser usado em Declarative, Data ou Framework Mode. A experiencia mais proxima de Remix e Framework Mode: route modules, server rendering,loader, action, geracao de tipos e convencoes de deploy. Para uma app nova de negocio, geralmente e o melhor ponto de partida.

Situacao	Escolha	Como pedir ao Claude Code
App nova	React Router v7 Framework Mode	Usecreate-react-router e route modules
Remix v2 existente	Manter padrao atual	Siga os imports@remix-run/* do repo
React SPA existente	Migrar aos poucos	Mova uma tela para loader/action
Landing com formulario	Framework ou SPA Mode	Decida SSR e action no servidor antes

Essa decisao evita retrabalho. Claude Code e rapido, mas sem limites claros ele combina exemplos de epocas diferentes. Aqui usamos React Router v7 Framework Mode.

Mini projeto executavel

Comece pequeno. Lista, detalhe e contato bastam para testar dados, formularios, erros e SEO.

npx create-react-router@latest rr-claude-shop
cd rr-claude-shop
npm install
npm run dev

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

export default [
  index("routes/home.tsx"),
  route("products", "routes/products.tsx"),
  route("products/:productId", "routes/products.$productId.tsx"),
  route("contact", "routes/contact.tsx"),
] satisfies RouteConfig;

Use um modulo somente do servidor para dados. Depois voce pode trocar por Prisma, Drizzle, Supabase ou API interna.

// app/data/products.server.ts
export type Product = {
  id: string;
  name: string;
  description: string;
  price: number;
};

const products: Product[] = [
  {
    id: "starter",
    name: "Claude Code Starter Kit",
    description: "Small prompts and review checklists for the first team rollout.",
    price: 9800,
  },
  {
    id: "team",
    name: "Team Workflow Pack",
    description: "Route reviews, test prompts, and deployment checklists for teams.",
    price: 29800,
  },
];

const leads: Array<{ id: string; email: string; message: string }> = [];

export async function listProducts(query = "") {
  const q = query.trim().toLowerCase();
  if (!q) return products;
  return products.filter((product) =>
    `${product.name} ${product.description}`.toLowerCase().includes(q),
  );
}

export async function getProduct(productId: string) {
  return products.find((product) => product.id === productId) ?? null;
}

export async function saveLead(input: { email: string; message: string }) {
  const lead = { id: crypto.randomUUID(), ...input };
  leads.push(lead);
  return lead;
}

Caso 1: ler dados com loader

Umloader junta os dados antes da rota renderizar. Isso e melhor do que esconder a busca inicial emuseEffect, porque carregamento, erro e SEO ficam no mesmo lugar.

// app/routes/products.tsx
import { Form, Link, useLoaderData, useNavigation } from "react-router";
import { listProducts } from "~/data/products.server";

export async function loader({ request }: { request: Request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q") ?? "";
  const products = await listProducts(q);
  return { q, products };
}

export default function ProductsRoute() {
  const { q, products } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const searching = navigation.location?.pathname === "/products";

  return (
    <main>
      <title>Products | Claude Code Shop</title>
      <meta
        name="description"
        content="Browse Claude Code workflow products and team enablement kits."
      />
      <h1>Products</h1>
      <Form method="get" role="search">
        <label>
          Search
          <input name="q" defaultValue={q} placeholder="workflow" />
        </label>
        <button type="submit">{searching ? "Searching..." : "Search"}</button>
      </Form>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>{product.name}</Link>
            <p>{product.description}</p>
            <strong>{product.price.toLocaleString()} JPY</strong>
          </li>
        ))}
      </ul>
    </main>
  );
}

Para codigo novo com React 19, os docs de route module recomendam<title> e<meta> integrados. Se um projeto antigo ja usameta(), mantenha consistencia. O ponto principal e evitar titulo duplicado e description vazia.

Caso 2: processar formulario com action

Umaaction recebe formularios e mutacoes. <Form> funciona como HTML normal antes do JavaScript e depois ganha estado de navegacao e revalidacao.

// app/routes/contact.tsx
import { Form, useActionData, useNavigation } from "react-router";
import { saveLead } from "~/data/products.server";

type ActionData =
  | { ok: true; leadId: string }
  | { ok: false; errors: { email?: string; message?: string } };

export async function action({ request }: { request: Request }): Promise<ActionData> {
  const formData = await request.formData();
  const email = String(formData.get("email") ?? "").trim();
  const message = String(formData.get("message") ?? "").trim();
  const errors: { email?: string; message?: string } = {};

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = "Enter a valid email address.";
  }
  if (message.length < 20) {
    errors.message = "Tell us at least 20 characters about your situation.";
  }
  if (Object.keys(errors).length > 0) {
    return { ok: false, errors };
  }

  const lead = await saveLead({ email, message });
  return { ok: true, leadId: lead.id };
}

No mundo real entram CSRF, rate limit, antispam, email e CRM. Peça isso no prompt. “Crie um formulario” e vago; “valide no servidor, mostre erros por campo, desative o botao ao enviar e mostre sucesso” funciona melhor.

Caso 3: limitar erros com ErrorBoundary

Se um produto nao existe, a rota de detalhe deve mostrar 404 local. A aplicacao inteira nao precisa quebrar.

// app/routes/products.$productId.tsx
import { data, isRouteErrorResponse, Link, useLoaderData } from "react-router";
import { getProduct } from "~/data/products.server";

export async function loader({ params }: { params: { productId?: string } }) {
  const productId = params.productId;
  if (!productId) {
    throw data("Missing product id", { status: 400 });
  }
  const product = await getProduct(productId);
  if (!product) {
    throw data("Product not found", { status: 404 });
  }
  return { product };
}

export function ErrorBoundary({ error }: { error: unknown }) {
  if (isRouteErrorResponse(error)) {
    return (
      <main>
        <h1>{error.status === 404 ? "Product not found" : "Could not load product"}</h1>
        <p>{error.data}</p>
        <Link to="/products">Back to products</Link>
      </main>
    );
  }
  return <main><h1>Unexpected error</h1><p>Please try again later.</p></main>;
}

Na revisao, confirme que erros esperados dao um proximo passo e erros inesperados nao mostramerror.stack, variaveis de ambiente, mensagens de banco ou URLs internas.

SEO, links e caminho de receita

SEO deve fazer parte da rota. A lista explica o que pode ser comparado, o detalhe comeca pelo nome do produto e a pagina de contato diz que tipo de ajuda esta disponivel. Links internos para desenvolvimento React com Claude Code, desenvolvimento de API e padroes de erro aumentam a profundidade da visita.

Revise este route module React Router v7 Framework Mode.
Verifique loader, action, ErrorBoundary, Form, title/description e imports.
Liste problemas por gravidade, proponha o menor diff seguro e indique comandos de verificacao.

Erros comuns: misturar imports antigos e novos, retornar dados privados doloader, confiar so na validacao do navegador, expor stack no erro, duplicar SEO e ignorar revalidacao depois de umaaction. Para praticar, comece pela folha gratuita. Para equipes que precisam de React Router v7, manutencao Remix v2, formularios e revisoes com Claude Code, use treinamento e consultoria Claude Code. Prompts e checklists ficam em produtos.

Masa testou busca de produtos, 404 no detalhe, validacao do formulario e mensagem de sucesso em um projeto pequeno. Um prompt vago gerou imports misturados efetch no cliente. Ao citar Framework Mode, route modules,loader, action, ErrorBoundary etitle/meta, o diff ficou menor e mais facil de revisar. Primeiro fixe a responsabilidade da rota; depois deixe Claude Code acelerar a implementacao.