Create Route

Create Route

When to Use

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

Critical Rules

1. Route Type Imports

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

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

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

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

Quick Start

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

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

Templates

• Page Route
• API Route
• Layout Route

Full Reference

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

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