Picking a Mode

Choose between Declarative, Data, and Framework modes for React Router

Picking a Mode

React Router is a multi-strategy router for React. There are three primary ways, or “modes”, to use it in your app. The features available in each mode are additive, so moving from Declarative to Data to Framework simply adds more features at the cost of architectural control.

Pick your mode based on how much control or how much help you want from React Router.

The Three Modes

The mode depends on which “top level” router API you’re using:

Declarative

Enables basic routing features like matching URLs to components, navigating around the app, and providing active states.

import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Data

Adds data loading, actions, pending states and more by moving route configuration outside of React rendering.

import { createBrowserRouter, RouterProvider } from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />
);

Framework

Wraps Data Mode with a Vite plugin for the full React Router experience with type-safe routing, intelligent code splitting, and SSR/SPA/SSG strategies.

import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

Mode Comparison

Feature	Declarative	Data	Framework
URL Matching	✅	✅	✅
Navigation	✅	✅	✅
Active States	✅	✅	✅
Data Loading	❌	✅	✅
Actions	❌	✅	✅
Pending States	❌	✅	✅
Type Safety	❌	❌	✅
Code Splitting	❌	❌	✅
SSR/SSG	Manual	Manual	Built-in
Setup Complexity	Low	Medium	Higher
Architectural Control	Full	High	Medium

Decision Guide

Every mode supports any architecture and deployment target, so the question isn’t really about if you want SSR, SPA, etc. It’s about how much you want to do yourself.

Examples By Mode

Declarative

import { BrowserRouter, Routes, Route, Link } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Can I Switch Modes Later?

Yes! The modes are designed to be upgrade paths:

Start simple and upgrade as your needs grow. Each mode builds on the previous one.