Skip to main content

​
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

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

See react-router.config.ts for application configuration options including:
  • App directory location
  • Build output settings
  • SSR and prerendering
  • Server bundles
  • Future flags
See routes.ts for route configuration including:
  • Route definitions with route(), index(), layout()
  • File-system routing with flatRoutes()
  • Nested route hierarchies
  • Custom route IDs
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

1
Install dependencies
2
npm install @react-router/dev vite
3
Create vite.config.ts
4
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRouter()],
});
5
Create app structure
6
app/
├── root.tsx
├── routes.ts
└── routes/
    └── _index.tsx
7
Start dev server
8
npx vite dev

​
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.