react-router-data-mode

Original：🇺🇸 English

Translated

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.

2installs

Sourceremix-run/agent-skills

Added on2026-02-07

NPX Install

npx skill4agent add remix-run/agent-skills react-router-data-mode

SKILL.md Content

View Translation Comparison →

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

<Link>

,

<NavLink>

,

<Form>

,

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(<RouterProvider router={router} />);

Forms & Mutations

Search forms - use

<Form method="get">

, NOT

onSubmit

with

setSearchParams

:

tsx

// ✅ Correct
<Form method="get">
  <input name="q" />
</Form>

// ❌ Wrong - don't manually handle search params
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>

Inline mutations - use

useFetcher

, NOT

<Form>

(which causes page navigation):

tsx

const fetcher = useFetcher();
const optimistic = fetcher.formData
  ? fetcher.formData.get("favorite") === "true"
  : isFavorite;

<fetcher.Form method="post" action={`/favorites/${id}`}>
  <button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;

See

references/actions.md

for complete patterns.

Optimistic UI Pattern

Use

fetcher.formData

to show expected results immediately:

tsx

function FavoriteButton({ itemId, isFavorite }) {
  const fetcher = useFetcher();

  // Optimistic: use pending form data, fallback to server state
  const optimistic = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : isFavorite;

  return (
    <fetcher.Form method="post" action={`/items/${itemId}/favorite`}>
      <input type="hidden" name="favorite" value={String(!optimistic)} />
      <button>{optimistic ? "★" : "☆"}</button>
    </fetcher.Form>
  );
}

See

references/pending-ui.md