Claude Code के साथ Remix/React Router: loader और action गाइड

2026 में Remix को कैसे समझें

2026 में Remix development का मतलब केवल Remix v2 app maintain करना नहीं है। Remix की कई framework वाली बातें अब React Router v7 Framework Mode में आ चुकी हैं, और Remix की official docs भी नई framework capabilities के लिए React Router docs की ओर भेजती हैं। इसलिए Claude Code को prompt देते समय पहले साफ करें कि आप existing Remix v2 codebase में change करवा रहे हैं या नया React Router v7 Framework Mode project बना रहे हैं। अगर prompt सिर्फ “Remix में बना दो” होगा, तो पुराने@remix-run/* imports, नएreact-router imports और client-sidefetch आपस में मिल सकते हैं।

Beginner-friendly mental model यह है: Remix/React Router style में हर route के पास अपनाloader औरaction होता है, यानी server logic और UI पास-पास रहते हैं। loader page render होने से पहले data पढ़ता है। action form submit और data mutation संभालता है। Component UI दिखाता है, और उसी route में error boundary तथा SEO meta भी रखे जा सकते हैं। इससे Claude Code से review मांगना आसान होता है: “इस route का read path, write path, error state और SEO एक साथ देखो।”

इस guide में हम React Router v7 Framework Mode के लिए छोटा app बनाते हैं: products list, product detail और contact form। इसमें तीन practical use case हैं: loader से data लेना, action से form process करना, औरErrorBoundary से 404/unknown error संभालना। Official references के रूप में Remix Docs, React Router v7 release, Route Module docs, Error Boundaries docs और Form API देखे गए।

flowchart LR
  A["URL / route"] --> B["loader data read करता है"]
  B --> C["UI component"]
  C --> D["Form submit"]
  D --> E["action validate और write करता है"]
  E --> B
  B --> F["ErrorBoundary"]
  E --> F

पहले mode तय करें

React Router v7 को Declarative, Data या Framework Mode में इस्तेमाल किया जा सकता है। Remix जैसा experience Framework Mode में मिलता है: route modules, server rendering,loader, action, type generation और deploy conventions साथ आते हैं।

Situation	Choice	Claude Code prompt
नया business app	React Router v7 Framework Mode	create-react-router और route modules use करो
existing Remix v2	current convention रखें	repo के@remix-run/* imports follow करो
existing React SPA	धीरे migrate करें	पहले एक screen को loader/action में बदलो
landing page + form	Framework या SPA Mode	SSR और server action की जरूरत पहले बताओ

यह decision prompt में लिखना जरूरी है। Claude Code तेज है, पर boundaries न हों तो वह अलग-अलग versions के examples मिला देता है। इस लेख में हम new React Router v7 Framework Mode मानते हैं।

Runnable mini project

छोटे project से शुरू करें। Product list, detail और contact form से data loading, mutation, error और SEO सब test हो जाते हैं।

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;

Data को server-only module में रखें। बाद में इसे Prisma, Drizzle, Supabase या internal API से बदला जा सकता है।

// 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;
}

Use case 1: loader से list पढ़ना

loader route render होने से पहले जरूरी data लाता है। Initial data को component केuseEffect में छुपाने की जगह loader में रखना beginner के लिए review-friendly है, क्योंकि loading, error और SEO route के पास रहते हैं।

// 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>
  );
}

React 19 के साथ नए code में route component के अंदर<title> और<meta> रखना official docs के करीब है। Existing app अगरmeta() export use करती है, तो वही convention रखें। मुख्य बात है duplicate title और खाली description से बचना।

Use case 2: action से form process करना

action form submit और mutation संभालता है। <Form> JavaScript load होने से पहले normal HTML form की तरह काम करता है और load होने के बाद React Router submitting state तथा revalidation जोड़ता है।

// 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 };
}

Real project में CSRF, rate limit, spam check, email और CRM integration जोड़ना होगा। Claude Code को “form बनाओ” न कहें; कहें “server-side validation, field error, submitting disabled button और success message जोड़ो”।

Use case 3: ErrorBoundary से failure सीमित करना

Product न मिले तो पूरी app crash नहीं होनी चाहिए। Detail route अपना local 404 दिखा सकती है।

// 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>;
}

Review में देखें कि expected error user को अगला step देता है और unexpected error stack, secret, database message या internal URL नहीं दिखाता।

SEO, internal links और monetization

SEO route design का हिस्सा होना चाहिए। Product list बताए कि user क्या compare कर सकता है, detail page product name से शुरू हो, और contact page बताए कि किस तरह की मदद मिल सकती है। Internal links जैसे Claude Code React development, Claude Code API development और error handling patterns reader को site में आगे ले जाते हैं।

इस React Router v7 Framework Mode route module की review करें।
loader, action, ErrorBoundary, Form, title/description और imports जांचें।
Issues severity order में लिखें, सबसे छोटा safe diff सुझाएं, और verification commands दें।

Common mistakes हैं: old और new imports मिलाना,loader से private data लौटाना, browser validation पर भरोसा करना, error UI में stack दिखाना, SEO title duplicate रखना, औरaction के बाद loader revalidation को न समझना। Practice के लिए free cheat sheet से शुरू करें। Team को React Router v7, Remix v2 maintenance, forms और Claude Code review workflow चाहिए तो Claude Code training देखें। Reusable prompts और checklist के लिए products उपयोगी हैं।

Masa ने छोटे project में product search, detail 404, contact validation और success message test किया। Vague prompt “Remix में form बनाओ” ने mixed imports और clientfetch दिया। जब prompt में Framework Mode, route module,loader, action, ErrorBoundary औरtitle/meta लिखा, तो diff छोटा और review-friendly हुआ। Lesson: पहले route की जिम्मेदारी तय करें, फिर Claude Code से implementation तेज कराएं।