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();

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 (

Dashboard

{/ Renders child routes /}

); }

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

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

安装

Dashboard