Installation

Install React Router for Framework, Data, or Declarative mode

Installation

Install React Router based on which mode you want to use. Each mode has different dependencies and setup requirements.

Framework Mode

Framework Mode Installation

Framework Mode provides the full-stack experience with Vite integration, automatic type generation, and SSR support.

Install Dependencies

npm

npm install react-router@latest
npm install -D @react-router/dev@latest
npm install @react-router/node@latest @react-router/serve@latest

Configure Vite

Update your vite.config.ts:

vite.config.ts

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

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

Add Scripts

Update your package.json:

package.json

{
  "scripts": {
    "dev": "react-router dev",
    "build": "react-router build",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc"
  }
}

Framework Mode requires Node.js 20 or higher.

Data Mode

Data Mode Installation

Data Mode uses createBrowserRouter for powerful data loading with loaders and actions.

Install Dependencies

npm

npm install react-router@latest

Setup Vite (Optional)

If you’re using Vite, add React plugin:

vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

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

Data Mode works with any bundler - Vite, Webpack, Rollup, or esbuild.

Declarative Mode

Declarative Mode Installation

Declarative Mode uses the classic JSX-based routing with <Routes> and <Route> components.

Install Dependencies

npm

npm install react-router@latest

Upgrading from v6?

If you’re upgrading from React Router v6, you can also install the compatibility package:

npm

npm install react-router-dom@latest

react-router-dom simply re-exports from react-router for v6 compatibility. New projects should import directly from react-router.

Server Adapters

For Framework Mode with SSR, choose a server adapter based on your deployment target:

Node.js

npm install @react-router/node

For Node.js environments like Express or standalone servers

Cloudflare

npm install @react-router/cloudflare

For Cloudflare Workers and Pages

Express

npm install @react-router/express

For Express.js integration

Optional Packages

File-based Routing

Use flatRoutes() for automatic route generation from your file system:

npm

npm install @react-router/fs-routes

app/routes.ts

import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default flatRoutes() satisfies RouteConfig;

Verify Installation

1. Check package.json

   Verify that react-router appears in your dependencies with the correct version.

2. Run type check

   For Framework Mode, run npm run typecheck to generate types and verify setup.

3. Start dev server

   Run your dev command (npm run dev) to ensure everything is configured correctly.

Next Steps

Quick Start Guide

Build your first React Router application