reactRouter

React Router Vite plugin for Framework Mode

reactRouter

The reactRouter Vite plugin enables Framework Mode with type-safe routing, automatic code splitting, and server-side rendering.

Import

import { reactRouter } from "@react-router/dev/vite";

Usage

vite.config.ts

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRouter()],
});

Configuration

The reactRouter plugin does not accept direct options. Instead, configuration is managed through:

1. react-router.config.ts - Application-level configuration
2. routes.ts - Route structure and organization
3. Vite config - Build and dev server settings

Configuration Files

react-router.config.ts

See react-router.config.ts for application configuration options including:

• App directory location
• Build output settings
• SSR and prerendering
• Server bundles
• Future flags

routes.ts

See routes.ts for route configuration including:

• Route definitions with route(), index(), layout()
• File-system routing with flatRoutes()
• Nested route hierarchies
• Custom route IDs

vite.config.ts

Standard Vite configuration applies:

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRouter()],
  // Standard Vite options
  base: "/",
  build: {
    sourcemap: true,
  },
  server: {
    port: 3000,
  },
});

Features

The reactRouter plugin provides:

Automatic Type Generation

Generates TypeScript types for your routes in .react-router/types/:

import type { Route } from "./+types/root";

export function loader({ params }: Route.LoaderArgs) {
  // params are fully typed
}

Code Splitting

Automatically splits routes into separate chunks for optimal loading:

• Each route module is a separate chunk
• Shared dependencies are extracted
• Critical CSS is inlined

Dev Server

Provides a development server with:

• Hot Module Replacement (HMR)
• Fast refresh for route modules
• Server-side rendering in development
• Automatic route discovery

Production Build

Optimizes your application for production:

• Client and server bundles
• Asset manifest generation
• CSS extraction and optimization
• Tree shaking of unused exports

Common Patterns

Basic Setup

Multiple Server Bundles

Configure server bundles in react-router.config.ts:

export default {
  serverBundles: ({ branch }) => {
    // Group routes by URL pattern
    const isAdminRoute = branch.some((route) => 
      route.id.startsWith("routes/admin")
    );
    return isAdminRoute ? "admin" : "main";
  },
};

Custom Base Path

export default defineConfig({
  base: "/my-app/",
  plugins: [reactRouter()],
});

export default {
  basename: "/my-app",
};

Prerendering Static Pages

export default {
  async prerender({ getStaticPaths }) {
    return [
      "/",
      "/about",
      "/pricing",
      ...getStaticPaths(),
    ];
  },
};

Environment Variables

Vite’s environment variable system works automatically:

// Access in route modules
export async function loader() {
  const apiUrl = import.meta.env.VITE_API_URL;
  // ...
}

VITE_API_URL=https://api.example.com

Only variables prefixed with VITE_ are exposed to client code.

TypeScript

The plugin automatically generates types. Ensure your tsconfig.json includes:

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.react-router/types/**/*"
  ],
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "jsx": "react-jsx"
  }
}

Plugin Order

The reactRouter plugin should be placed first in most cases:

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    reactRouter(), // First
    tsconfigPaths(),
  ],
});

Some plugins like cloudflareDevProxy must come before reactRouter.

Related

• react-router.config.ts
• routes.ts
• cloudflareDevProxy