> ## 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.

# Introduction

> React Router is a multi-strategy router for React bridging the gap from React 18 to React 19

# Welcome to React Router

React Router is a **multi-strategy router** for React that bridges the gap from React 18 to React 19. Use it maximally as a React framework or minimally as a library with your own architecture.

## Three Ways to Use React Router

Choose the mode that fits your project:

<CardGroup cols={3}>
  <Card title="Framework Mode" icon="layer-group" href="/quickstart#framework-mode">
    Full-stack framework with Vite integration, type generation, and SSR
  </Card>

  <Card title="Data Mode" icon="database" href="/quickstart#data-mode">
    Powerful data loading with loaders and actions using createBrowserRouter
  </Card>

  <Card title="Declarative Mode" icon="code" href="/quickstart#declarative-mode">
    Classic JSX-based routing with Routes and Route components
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={2}>
  <Card title="Type Safety" icon="shield-check">
    Automatic type generation for route modules in Framework Mode with full TypeScript support
  </Card>

  <Card title="Data Loading" icon="arrow-down-to-line">
    Load data before rendering with loaders and handle mutations with actions
  </Card>

  <Card title="Nested Routes" icon="sitemap">
    Compose complex UIs with nested routes and outlets for powerful layouts
  </Card>

  <Card title="SSR & SPA" icon="server">
    Build server-rendered apps or client-only SPAs with the same API
  </Card>

  <Card title="File-based Routing" icon="folder-tree">
    Automatic route generation from your file system structure
  </Card>

  <Card title="Optimistic UI" icon="bolt">
    Build responsive UIs with pending states, fetchers, and optimistic updates
  </Card>
</CardGroup>

## Why React Router?

<Note>
  React Router is the most popular and powerful routing library for React applications, trusted by companies worldwide.
</Note>

* **Flexible**: Start simple with declarative routes, add data loading when needed, or go full framework
* **Progressive**: Upgrade from v6 to v7 gradually, or migrate from Remix seamlessly
* **Production-ready**: Battle-tested in thousands of production applications
* **Modern**: Built for React 18+ with support for React 19 features

## Quick Comparison

| Feature            | Framework Mode | Data Mode | Declarative Mode |
| ------------------ | -------------- | --------- | ---------------- |
| Type Generation    | ✅              | ❌         | ❌                |
| Data Loaders       | ✅              | ✅         | ❌                |
| File-based Routing | ✅              | ❌         | ❌                |
| SSR Support        | ✅              | ⚠️ Manual | ⚠️ Manual        |
| Build Tooling      | ✅ Vite Plugin  | ❌         | ❌                |
| Complexity         | High           | Medium    | Low              |

## Get Started

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install React Router for your preferred mode
  </Card>

  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Build your first React Router app in minutes
  </Card>
</CardGroup>

## Resources

<CardGroup cols={2}>
  <Card title="GitHub" icon="github" href="https://github.com/remix-run/react-router">
    View the source code and contribute
  </Card>

  <Card title="Changelog" icon="clock-rotate-left" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md">
    See what's new in React Router
  </Card>

  <Card title="Upgrade from v6" icon="arrow-up" href="https://reactrouter.com/upgrading/v6">
    Migrate your v6 application to v7
  </Card>

  <Card title="Upgrade from Remix" icon="arrow-right-arrow-left" href="https://reactrouter.com/upgrading/remix">
    Transition from Remix to React Router
  </Card>
</CardGroup>