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

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