React Router full-stackThe standard routing solution for React
React Router v7 / Remix is a full-stack framework built on React Router's data APIs — loaders, actions, nested routes, and error boundaries. We use it for data-heavy apps where fine-grained control over loading states matters.
React Router is the standard routing library for React, and with v7 (the spiritual successor to Remix), it's now a full-stack framework. It provides nested routes with data loaders and actions, error boundaries, progressive enhancement, and SSR — all built on web standards like the Fetch API and FormData. React Router v7's framework mode gives you file-based routing, server-side rendering, and streaming while maintaining the ability to deploy anywhere Node.js runs. It's the choice for teams that value web platform alignment and fine-grained control over data loading.
Quick start
npx create-react-router@latest my-app
cd my-app
npm install
npm run devRead the full documentation at reactrouter.com
Nested routing
Nested route layouts with parallel data loading — each segment fetches independently for faster page transitions.
Loader & action pattern
Loaders fetch data before render, actions handle mutations — clean separation of reads and writes per route.
Progressive enhancement
Forms work without JavaScript by default — then enhance with client-side transitions when JS loads.
Error boundaries
Per-route error boundaries catch and display errors without crashing the entire application.
SSR & framework mode
Server-side rendering with streaming, plus framework mode for use inside Remix, Next.js, or standalone.
Deploy anywhere
Runs on Node.js, Cloudflare Workers, Deno, or any standard web server — no vendor lock-in.
Why it's hard
React Router v6/v7 migration complexity
The jump from v5 to v6 changed the entire API surface. Moving to v7 framework mode (Remix-style loaders/actions) requires rethinking data fetching patterns across your app.
Loader/action data flow patterns
Understanding the loader → component → action → revalidation cycle takes time. Managing optimistic UI, pending states, and race conditions in this model is non-trivial.
Framework mode vs. library mode decision
React Router v7 can be used as a simple client-side router or a full-stack framework. Choosing the right mode and understanding the tradeoffs impacts your entire architecture.
SSR configuration and deployment
Setting up React Router's SSR with streaming, deploying to different platforms (Node, Cloudflare, Vercel), and handling hydration errors requires careful configuration.
Best practices
Use loaders for data fetching, not useEffect
React Router's loader functions run before the component renders, eliminating loading spinners and waterfall requests. Always prefer loaders over component-level data fetching.
Leverage progressive enhancement with actions
Form actions work without JavaScript enabled and enhance with client-side behavior when available. This gives you resilient forms that work even when JS fails.
Use nested routes for layout composition
Nest routes to share layouts, loading states, and error boundaries. Each route segment loads its own data independently, enabling parallel data fetching.
Implement optimistic UI with useFetcher
useFetcher gives you pending state for mutations without navigation. Use it for inline edits, toggles, and any mutation that shouldn't cause a page transition.
Frequently asked questions
Related technologies
Related services
Looking for end-to-end delivery? These services complement React Router projects.
Want to build with React Router?
Talk to our engineering team about your React Router architecture. We'll respond within 24 hours.
We limit intake each month so every project gets the focus it deserves.