const router = createBrowserRouter([ { path: "/", Component: Root, ErrorBoundary: RootErrorBoundary, loader: rootLoader, children: [ { index: true, Component: Home }, { path: "products/:productId", Component: Product, loader: productLoader }, ], }, ]);

ReactDOM.createRoot(root).render();


**Framework Mode (Vite plugin)**:
```ts
// routes.ts
import { index, route } from "@react-router/dev/routes";

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

Route Configuration

Nested Routes with Outlets

createBrowserRouter([
  {
    path: "/dashboard",
    Component: Dashboard,
    children: [
      { index: true, Component: DashboardHome },
      { path: "settings", Component: Settings },
    ],
  },
]);

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Renders child routes */}
    </div>
  );
}

Dynamic Segments and Splats

{ path: "teams/:teamId" }           // params.teamId
{ path: ":lang?/categories" }       // Optional segment
{ path: "files/*" }                 // Splat: params["*"]

Key Decision Points

Form vs Fetcher

Use <Form>: Creating/deleting with URL change, adding to history Use useFetcher: Inline updates, list operations, popovers - no URL change

Loader vs useEffect

Use loader: Data before render, server-side fetch, automatic revalidation Use useEffect: Client-only data, user-interaction dependent, subscriptions

Gates (decision sequencing)

Answer in order. Pass means the condition is true; pick the API on the same line and stop.

`<Form>` vs `useFetcher`

Must the URL or history stack change (bookmark/share, back returns to prior screen)?
- Pass → <Form> / route action (or useSubmit + navigation). Stop.
- Fail → Step 2.
Mutation stays on the same route (inline edit, modal, list row, no address change)?
- Pass → useFetcher(). Stop.
- Fail → Re-check step 1; you may need a dedicated action route or POST to the current URL.

`loader` vs `useEffect`

Is data needed for correct first render (or your intended <Suspense> boundary) for this route?
- Pass → loader (Framework: clientLoader when appropriate). Stop.
- Fail → Step 2.
Fetch only after mount from user action, timer, or subscription (not route entry)?
- Pass → useEffect / event handlers. Stop.
- Fail → Prefer loader + revalidation over an effect that mirrors navigation.

Additional Documentation

Data Loading: See references/loaders.md for loader patterns, parallel loading, search params
Mutations: See references/actions.md for actions, Form, fetchers, validation
Navigation: See references/navigation.md for Link, NavLink, programmatic nav
Advanced: See references/advanced.md for error boundaries, protected routes, lazy loading

Mode Comparison

Feature	Framework Mode	Data Mode	Declarative Mode
Setup	Vite plugin	`createBrowserRouter`	`<BrowserRouter>`
Type Safety	Auto-generated types	Manual	Manual
SSR Support	Built-in	Manual	Limited
Use Case	Full-stack apps	SPAs with control	Simple/legacy

react-router-v7

React Router v7 Best Practices

Quick Reference