Create Route

Name: create-route
Rating: 92
Author: tech-with-seth

When to Use

•Creating new pages or views
•Adding API endpoints
•Creating layout routes with <Outlet />

Critical Rules

1. Route Type Imports

tsx

// ALWAYS use this pattern:
import type { Route } from './+types/my-route';

// NEVER use relative paths:
// import type { Route } from '../+types/my-route';  // WRONG!

If types are missing: Run npm run typecheck - NEVER change the import path.

2. Destructure Directly

tsx

// CORRECT
export async function action({ request, params }: Route.ActionArgs) {}

// WRONG
export async function action(args: Route.ActionArgs) {
    const { request } = args;  // Don't do this!
}

3. Access Data via Props

tsx

// CORRECT
export default function MyPage({ loaderData }: Route.ComponentProps) {}

// WRONG
const data = useLoaderData();  // Don't use hooks!

Quick Start

tsx

import type { Route } from './+types/my-page';
import { data, redirect } from 'react-router';

export async function loader({ request }: Route.LoaderArgs) {
    const user = await requireUser(request);
    return { user };
}

export async function action({ request }: Route.ActionArgs) {
    const formData = await request.formData();
    // Handle POST/PUT/DELETE
    return redirect('/success');
}

export default function MyPage({ loaderData }: Route.ComponentProps) {
    return (
        <>
            <title>Page Title | Iridium</title>
            <meta name="description" content="Description" />
            {/* Content */}
        </>
    );
}

Checklist

• Create route file in app/routes/
• Register in app/routes.ts
• Run npm run typecheck to generate types
• Add path to Paths constant if reusable

Templates

Full Reference

See .github/instructions/react-router.instructions.md for:

•Nested routes & layouts
•Dynamic segments & optional segments
•Streaming with Suspense
•Error boundaries
•Navigation patterns