React Router V7

React Router v7 best practices for data-driven routing. Use when implementing routes, loaders, actions, Form components, fetchers, navigation guards, protect...

Security Scan

This is an instruction-only documentation skill with React Router v7 best-practice examples; it requests no credentials, performs no installs, and is internally consistent with its stated purpose.

Purpose & Capability

Name/description match the included files (guides and reference docs). The skill requires no binaries, env vars, or installs — which is proportionate for a docs/reference skill. Note: homepage/source are missing, so the author/origin cannot be independently verified, but that does not make the requirements inconsistent with the stated purpose.

Instruction Scope

SKILL.md and the referenced files contain only example code and prose about routing, loaders, actions, fetchers, navigation, and error boundaries. There are no runtime instructions for reading system files, accessing unrelated environment variables, or exfiltrating data. Some examples reference server-side helpers (db.getRecord, getUserById, fetchTeam) and show error.stack in an error boundary — those are normal examples but should not be copied into production without sanitization.

Install Mechanism

No install spec and no code files that would be written to disk. Instruction-only skill is lowest-risk in install mechanism terms.

Credentials

The skill declares no required environment variables, credentials, or config paths. Example snippets reference request-derived data and placeholder server functions, which is expected for routing docs and does not imply hidden credential access.

Persistence & Privilege

always is false and the skill is user-invocable. It doesn't request persistent privileges or modify other skills or system settings.

Assessment

This is documentation-only guidance for React Router v7 and appears safe to install: it doesn't ask for secrets, doesn't install code, and only contains example snippets. Before using the examples in production: (1) verify the source/author since no homepage is provided, (2) audit any server-side helper functions (db.getRecord, getUserById, etc.) you wire up, and (3) avoid rendering raw error.stack or other sensitive internals in user-facing error UIs. If you need provenance, ask the publisher for a homepage or repository link before trusting the content wholesale.

React Router v7 Best Practices

Quick Reference

Router Setup (Data Mode):

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

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

Framework Mode (Vite plugin):

// 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