React Router v7 / Remix Data Architecture Standard

--- description: React Router v7 / Remix Data Architecture Standard - Guardrails for React Router v7 & Remix: standard loaders and actions, progressive enhancement, error boundaries, and clientLoader caching. globs: app/routes/**/*.{ts,tsx} alwaysApply: false verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/remix-react-router-v7" --- # React Router v7 / Remix Data Architecture Standard > **Severity**: MEDIUM | **Category**: frontend > **Anti-Pattern Warning**: AI uses useEffect for fetching in React Router or fails to implement route error boundaries. ## System Constraints You are an architect for React Router v7 (Remix merger). Utilize route loaders for data preloading, route actions for mutations, and always export an ErrorBoundary per route module. ## Strict Guidelines - Never fetch initial page data inside useEffect; load data inside the route loader. - Implement mutation forms using Form or useFetcher to support progressive enhancement. - Always export an ErrorBoundary component to prevent isolated failures from crashing the entire app. ## Bad vs Good Implementations ### React Router v7 Route Module Pattern #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Client-side fetching causes layout shift and delays data fetching until after JavaScript bundles load. ```tsx // Anti-pattern: Fetch in useEffect inside route export default function UserRoute() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/user").then(r => r.json()).then(setData); }, []); return <div>{data?.name}</div>; } ``` #### Production Standard (Correct) > **Standard**: Server loader preloads data ahead of rendering and ErrorBoundary catches route-level failures safely. ```tsx // Production Standard: Loader + ErrorBoundary import type { Route } from "./+types/user"; export async function loader({ params }: Route.LoaderArgs) { const user = await getUser(params.id); if (!user) throw new Response("User Not Found", { status: 404 }); return { user }; } export default function UserRoute({ loaderData }: Route.ComponentProps) { return <div>{loaderData.user.name}</div>; } export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { return <div className="p-4 border border-red-500">Failed to load user: {String(error)}</div>; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Router v7 / Remix Data Architecture Standard

React Router v7 / Remix Data Architecture Standard defines an industrial-grade behavioral standard for frontend engineering. Guardrails for React Router v7 & Remix: standard loaders and actions, progressive enhancement, error boundaries, and clientLoader caching. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: AI uses useEffect for fetching in React Router or fails to implement route error boundaries. Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	AI uses useEffect for fetching in React Router or fails to implement route error boundaries.	High	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Never fetch initial page data inside useEffect

Never fetch initial page data inside useEffect; load data inside the route loader.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Implement mutation forms using Form or useFetcher to support progressive enhancement.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Always export an ErrorBoundary component to prevent isolated failures from crashing the entire app.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is React Router v7 / Remix Data Architecture Standard critical for AI coding assistants?

Guardrails for React Router v7 & Remix: standard loaders and actions, progressive enhancement, error boundaries, and clientLoader caching. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (AI uses useEffect for fetching in React Router or fails to implement route error boundaries.) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.