> ## 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.
# Quick Start
> Build your first React Router app in minutes
# Quick Start Guide
Get started with React Router by building a simple application in your preferred mode.
## Framework Mode Quick Start
Build a type-safe, full-stack app with automatic code splitting and SSR.
Create the following files:
```
my-app/
├── app/
│ ├── root.tsx
│ ├── routes.ts
│ └── routes/
│ └── _index.tsx
├── vite.config.ts
└── package.json
```
Define your routes in `app/routes.ts`:
```typescript app/routes.ts theme={null}
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes() satisfies RouteConfig;
```
Set up your app shell in `app/root.tsx`:
```typescript app/root.tsx theme={null}
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
export default function App() {
return ;
}
```
Add your first route with a loader in `app/routes/_index.tsx`:
```typescript app/routes/_index.tsx theme={null}
import type { Route } from "./+types/_index";
export function loader({ params }: Route.LoaderArgs) {
return { message: "Hello, React Router!" };
}
export default function Index({ loaderData }: Route.ComponentProps) {
return (
{loaderData.message}
Welcome to Framework Mode
);
}
```
Start the development server:
```bash theme={null}
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to see your app!
Framework Mode automatically generates TypeScript types in `.react-router/types/` for full type safety across your routes.
### Add More Routes
Create additional routes using file-based routing conventions:
```typescript app/routes/about.tsx theme={null}
import type { Route } from "./+types/about";
export default function About() {
return
About Page
;
}
```
```typescript app/routes/blog.$slug.tsx theme={null}
import type { Route } from "./+types/blog.$slug";
export function loader({ params }: Route.LoaderArgs) {
return { slug: params.slug };
}
export default function BlogPost({ loaderData }: Route.ComponentProps) {
return
Blog Post: {loaderData.slug}
;
}
```
## Data Mode Quick Start
Use `createBrowserRouter` for powerful data loading without the framework overhead.
Set up your router with loaders and actions:
```typescript src/main.tsx theme={null}
import { createRoot } from "react-dom/client";
import { createBrowserRouter, useLoaderData } from "react-router";
import { RouterProvider } from "react-router/dom";
const router = createBrowserRouter([
{
path: "/",
loader() {
return { message: "Hello React Router!" };
},
Component() {
let data = useLoaderData();
return
;
}
```
Load data before rendering with loaders:
```typescript src/main.tsx theme={null}
import type { LoaderFunctionArgs } from "react-router";
const router = createBrowserRouter([
{
path: "/products/:id",
async loader({ params }: LoaderFunctionArgs) {
const response = await fetch(`/api/products/${params.id}`);
return response.json();
},
Component() {
const product = useLoaderData();
return (
{product.name}
{product.description}
);
},
},
]);
```
Start your dev server (Vite, Webpack, etc.):
```bash theme={null}
npm run dev
```
Data Mode works great with any build tool and gives you full control over your application architecture.
## Declarative Mode Quick Start
Use familiar JSX components for simple, client-side routing.
Create a simple routing structure with `Routes` and `Route`:
```typescript src/App.tsx theme={null}
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router";
export default function App() {
return (
}>
} />
} />
} />
);
}
```
Build a shared layout with navigation:
```typescript src/App.tsx theme={null}
function Layout() {
return (
);
}
```
Create your page components:
```typescript src/App.tsx theme={null}
function Home() {
return (
Home
Welcome to React Router!
);
}
function About() {
return (
About
This is the about page.
);
}
function NotFound() {
return (
404 - Page Not Found
Go home
);
}
```
Start your development server:
```bash theme={null}
npm run dev
```
Declarative Mode doesn't support data loaders or actions. For data loading, use Data Mode or Framework Mode.
### Using URL Parameters
Access dynamic route parameters with `useParams`:
```typescript src/App.tsx theme={null}
import { useParams } from "react-router";
function BlogPost() {
const { slug } = useParams();
return
Blog Post: {slug}
;
}
// In your routes:
} />
```
## Comparison at a Glance
| Feature | Framework Mode | Data Mode | Declarative Mode |
| ---------------- | ------------------- | ------------------- | ------------------ |
| Setup Complexity | High | Medium | Low |
| Type Safety | ✅ Auto-generated | ⚠️ Manual | ⚠️ Manual |
| Data Loading | ✅ Loaders & Actions | ✅ Loaders & Actions | ❌ Client-side only |
| Code Splitting | ✅ Automatic | ⚠️ Manual | ⚠️ Manual |
| SSR Support | ✅ Built-in | ⚠️ Manual setup | ⚠️ Manual setup |
| Best For | Full-stack apps | SPAs with data | Simple client apps |
## Next Steps
Learn about nested routes, layouts, and navigation
Master loaders, actions, and data mutations
Set up end-to-end type safety in Framework Mode
Deploy your React Router app to production