Documentation Index
Fetch the complete documentation index at: https://mintlify.com/remix-run/react-router/llms.txt
Use this file to discover all available pages before exploring further.
Installation
Install React Router based on which mode you want to use. Each mode has different dependencies and setup requirements.
Framework Mode
Data Mode
Declarative Mode
Framework Mode Installation
Framework Mode provides the full-stack experience with Vite integration, automatic type generation, and SSR support.Install Dependencies
npm install react-router@latest
npm install -D @react-router/dev@latest
npm install @react-router/node@latest @react-router/serve@latest
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:{
"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 Installation
Data Mode uses createBrowserRouter for powerful data loading with loaders and actions.Install Dependencies
npm install react-router@latest
Setup Vite (Optional)
If you’re using Vite, add React plugin: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 Installation
Declarative Mode uses the classic JSX-based routing with <Routes> and <Route> components.Install Dependencies
npm install react-router@latest
Upgrading from v6?
If you’re upgrading from React Router v6, you can also install the compatibility package: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
Cloudflare
npm install @react-router/cloudflare
Express
npm install @react-router/express
Optional Packages
File-based Routing
Use flatRoutes() for automatic route generation from your file system:
npm install @react-router/fs-routes
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes() satisfies RouteConfig;
Verify Installation
Check package.json
Verify that react-router appears in your dependencies with the correct version.
Run type check
For Framework Mode, run npm run typecheck to generate types and verify setup.
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