--- name: react-router-data-mode description: Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending\/optimistic UI without the Vite plugin. license: MIT --- # React Router Data Mode Data mode uses `createBrowserRouter` and `RouterProvider` to enable data loading, actions, and pending UI without the framework's Vite plugin. This is ideal for existing React applications that want to add data loading and mutation capabilities. ## When to Apply - Using `createBrowserRouter` with route objects - Loading data with `loader` property on routes - Handling mutations with `action` property - Navigating with ``, ``, `

`, `redirect`, and `useNavigate` - Implementing pending\/loading UI states with `useNavigation` - Using `useFetcher` for mutations without navigation ## References Load the relevant reference for detailed guidance on the specific API\/concept: | Reference | Use When | | ---------------------------- | ----------------------------------------- | | `references\/routing.md` | Configuring routes, nested routes, layout | | `references\/route-object.md` | Understanding route object properties | | `references\/data-loading.md` | Loading data with loaders | | `references\/actions.md` | Handling forms, mutations, validation | | `references\/navigation.md` | Links, programmatic navigation, redirects | | `references\/pending-ui.md` | Loading states, optimistic UI | | `references\/ssr.md` | Server-side rendering with data mode | ## Critical Patterns These are the most important patterns to follow. Load the relevant reference for full details. ### Basic Router Setup ```tsx import { createBrowserRouter, RouterProvider } from "react-router"; const router = createBrowserRouter([ { path: "\/", Component: Root, children: [ { index: true, Component: Home }, { path: "about", Component: About }, ], }, ]); ReactDOM.createRoot(root).render(); ``` ### Forms & Mutations **Search forms** - use ``, NOT `onSubmit` with `setSearchParams`: ```tsx \/\/ ✅ Correct <\/Form> \/\/ ❌ Wrong - don't manually handle search params { e.preventDefault(); setSearchParams(...) }}> ``` **Inline mutations** - use `useFetcher`, NOT `` (which causes page navigation): ```tsx const fetcher = useFetcher(); const optimistic = fetcher.formData?.get("favorite") === "true" ?? isFavorite;