Back to Home
React logoReact INTERMEDIATE

React Router v7

Complete guide to React Router v7 with Library Mode and Framework Mode, data loading, actions, and modern routing patterns

12 min read
react-routerroutingreactspanavigationremixframework

Installation & Setup

Setting up React Router v7 in Library Mode and Framework Mode

Installation & Basic Setup

Installing React Router v7 and choosing between Library and Framework modes

typescript
💡 Framework Mode includes SSR, data loading, and actions out of the box
⚡ Library Mode is lighter for SPAs, Framework Mode for full-stack apps
📌 Framework Mode uses file-based routing by default
🟢 Start with Library Mode if migrating from v6
setupinstallationconfiguration

Routing Basics

Core routing concepts and components

Route Configuration

Defining routes and nested routes

typescript
💡 Framework Mode uses file-based routing with naming conventions
⚡ Lazy loading routes reduces initial bundle size
📌 Loaders run in parallel for nested routes
🟢 Use index routes for default child components
routingconfigurationnested

Navigation Components

Link, NavLink, and programmatic navigation

typescript
💡 NavLink automatically adds active class for current route
⚡ Use navigate with replace: true to avoid back button issues
📌 Pass state through navigation for context
🟢 Framework Mode supports automatic prefetching
navigationlinknavlink

Data Loading

Loaders, data fetching, and streaming

Loaders & Data Fetching

Loading data before rendering components

typescript
💡 Use defer() to stream non-critical data for faster initial loads
⚡ Loaders run in parallel for nested routes automatically
📌 Throw responses for errors and redirects
🟢 Always handle loading states with Suspense for deferred data
loadersdatadeferstreaming

Revalidation & Fetchers

Data revalidation and non-navigation data fetching

typescript
💡 Fetchers are perfect for non-navigation data operations
⚡ Use fetcher.Form for forms that don't navigate
📌 shouldRevalidate gives fine control over data refresh
🟢 Fetchers with keys persist across route changes
fetcherrevalidationdata

Forms & Actions

Form handling, actions, and mutations

Forms & Actions

Handling forms with actions and progressive enhancement

typescript
💡 Forms work without JavaScript - progressive enhancement
⚡ Use fetcher.Form for non-navigation forms
📌 Actions handle POST, PUT, PATCH, DELETE methods
🟢 Return json() with validation errors for form feedback
formsactionsmutations

Error Handling

Error boundaries and error handling patterns

Error Boundaries

Handling errors in loaders, actions, and components

typescript
💡 Error boundaries catch errors in loaders, actions, and rendering
⚡ Use isRouteErrorResponse to handle thrown Responses
📌 Errors bubble up to nearest errorElement
🟢 Throw Response objects for HTTP-style errors
errorserror-boundaryhandling

Framework Mode Features

Server-side rendering, streaming, and framework-specific features

SSR & Streaming

Server-side rendering and HTML streaming in Framework Mode

typescript
💡 Framework Mode enables SSR and streaming out of the box
⚡ Use defer() to stream non-critical data
📌 .server files only run on server, never bundled to client
🟢 Client components need "use client" directive
ssrstreamingframeworkserver

More React Cheat Sheets

React Hooks

INTERMEDIATE8 min

React Custom Hooks

ADVANCED20 min

React Design Patterns

ADVANCED22 min