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:

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:

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:

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>
  );
}

Run your app

Start the development server:

npm run dev

Open 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:

app/routes/about.tsx

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:

src/main.tsx

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:

src/main.tsx

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:

src/main.tsx

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.):

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.

Set up your app

Create a simple routing structure with Routes and Route:

src/App.tsx

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:

src/App.tsx

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:

src/App.tsx

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:

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:

src/App.tsx

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

Overview

Getting Started

Core Concepts

Routing

Data Loading

Framework Features

Guides

Advanced

Deployment

Migration

Quick Start

Quick Start Guide

Framework Mode Quick Start

Add More Routes

Data Mode Quick Start

Declarative Mode Quick Start

Using URL Parameters

Comparison at a Glance

Next Steps

Routing Concepts

Data Loading

Type Safety

Deployment

​Quick Start Guide

​Framework Mode Quick Start

​Add More Routes

​Data Mode Quick Start

​Declarative Mode Quick Start

​Using URL Parameters

​Comparison at a Glance

​Next Steps

Routing Concepts

Data Loading

Type Safety

Deployment

Quick Start Guide

Framework Mode Quick Start

Add More Routes

Data Mode Quick Start

Declarative Mode Quick Start

Using URL Parameters

Comparison at a Glance

Next Steps