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 Guide
Get started with React Router by building a simple application in your preferred mode.
Framework Mode
Data Mode
Declarative Mode
Framework Mode Quick Start
Build a type-safe, full-stack app with automatic code splitting and SSR.Create project structure
Create the following files:my-app/
├── app/
│ ├── root.tsx
│ ├── routes.ts
│ └── routes/
│ └── _index.tsx
├── vite.config.ts
└── package.json
Configure routes
Define your routes in app/routes.ts:import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes() satisfies RouteConfig;
Create root layout
Set up your app shell in app/root.tsx:import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
Create index route
Add your first route with a loader in app/routes/_index.tsx: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 (
<div>
<h1>{loaderData.message}</h1>
<p>Welcome to Framework Mode</p>
</div>
);
}
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:import type { Route } from "./+types/about";
export default function About() {
return <h1>About Page</h1>;
}
app/routes/blog.$slug.tsx
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 <h1>Blog Post: {loaderData.slug}</h1>;
}
Data Mode Quick Start
Use createBrowserRouter for powerful data loading without the framework overhead.Create your router
Set up your router with loaders and actions: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 <h1>{data.message}</h1>;
},
},
]);
createRoot(document.getElementById("root")!).render(
<RouterProvider router={router} />
);
Add nested routes
Build complex UIs with nested routes:import { Outlet, Link } from "react-router";
const router = createBrowserRouter([
{
path: "/",
Component: Layout,
children: [
{
index: true,
Component: Home,
},
{
path: "about",
Component: About,
},
],
},
]);
function Layout() {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Outlet />
</div>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
Add data loading
Load data before rendering with loaders: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 (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
</div>
);
},
},
]);
Run your app
Start your dev server (Vite, Webpack, etc.): 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.Set up your app
Create a simple routing structure with Routes and Route:import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
</BrowserRouter>
);
}
Create layout component
Build a shared layout with navigation:function Layout() {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<hr />
<Outlet />
</div>
);
}
Add route components
Create your page components:function Home() {
return (
<div>
<h1>Home</h1>
<p>Welcome to React Router!</p>
</div>
);
}
function About() {
return (
<div>
<h1>About</h1>
<p>This is the about page.</p>
</div>
);
}
function NotFound() {
return (
<div>
<h1>404 - Page Not Found</h1>
<Link to="/">Go home</Link>
</div>
);
}
Run your app
Start your development server: 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:import { useParams } from "react-router";
function BlogPost() {
const { slug } = useParams();
return <h1>Blog Post: {slug}</h1>;
}
// In your routes:
<Route path="blog/:slug" element={<BlogPost />} />
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
Routing Concepts
Learn about nested routes, layouts, and navigation
Data Loading
Master loaders, actions, and data mutations
Type Safety
Set up end-to-end type safety in Framework Mode
Deployment
Deploy your React Router app to production