skills.rest
zenbuapps
zenbuappsOFFICIAL
Explore all skills by this author →
GitHub

react-router-v7

Implement React Router v7 Data Mode routing with loaders and actions.

1|Updated Mar 6, 2026
Search Tags:#suspense#react#routing#spa#loaders#actions#react-router
One-click install
npx skills add https://github.com/zenbuapps/zenbu-powers --skill react-router-v7-zenbuapps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router-v7
Source: https://github.com/zenbuapps/zenbu-powers/tree/main/skills/react-router-v7
Command: npx skills add https://github.com/zenbuapps/zenbu-powers --skill react-router-v7-zenbuapps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React Router v7 Data Mode enables developers to build rich, data-driven SPAs by leveraging loaders, actions, and streaming to fetch and manage routes and data in a predictable way.

Core Features & Use Cases

  • Declarative and Data modes supported: BrowserRouter with Routes for simple UI, and createBrowserRouter + RouterProvider for data-driven routes.
  • Data loading and actions: demonstrates loaders and actions used in route objects to fetch data and handle form submissions.
  • Migrating from v6: highlights key differences such as RouterProvider import path and formMethod casing, with guidance for upgrading existing apps.

Quick Start

Create a small React Router v7 Data Mode app with createBrowserRouter and RouterProvider to verify loaders and actions.

Frequently Asked Questions about react-router-v7

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up React Router v7 data routing using createBrowserRouter?▼

Set up React Router v7 data routing by defining route objects with loaders and actions, then passing them to createBrowserRouter and rendering via RouterProvider imported from react-router/dom.

What are the key differences when migrating to React Router v7 from v6?▼

Migrating to React Router v7 requires changing the RouterProvider import path and uppercasing formMethod, while adapting loader data handling and route configurations to the new data mode structure.

How does Suspense data streaming work with nested routes in React Router v7?▼

Suspense data streaming in React Router v7 allows nested routes to progressively stream loader data to the UI, enabling predictable data fetching and rendering across complex route hierarchies.

When should I use declarative routing versus data mode in React Router?▼

Use declarative routing with BrowserRouter and Routes for simple UI navigation, and switch to data mode with createBrowserRouter for data-driven SPAs requiring loaders, actions, and streaming.

Why is my formMethod not working after upgrading to React Router v7?▼

Your formMethod is likely failing because React Router v7 requires uppercase casing for formMethod values, a key difference from previous versions during form submission handling.

Can I use actions and loaders together in nested route configurations?▼

Yes, loaders and actions can be defined together in nested route configuration objects to fetch data and handle form submissions predictably within the same React Router v7 data mode hierarchy.

Related Skills

Explore More Software Engineering Skills→
vessuxvessux
1

using-git-worktrees

Create an isolated Git worktree workspace for feature development.

Community
Advanced
jmgomezdevjmgomezdev

tanstack

Generate TanStack Query and Router data flow layers for React features.

Community
Advanced
matthewharwoodmatthewharwood
1

react-19-primitives

Coordinate React 19 primitives for promise-driven UI in dean-stack SPAs.

Community
Advanced
mambisimambisi

routing

Manage SPA routing with route guards, loaders, and client-side navigation in pocopine.

Community
Advanced