Upgrading from React Router v6 to v7 — What Changed and a Step-by-Step Migration Guide

In a previous post, we walked through setting up React Router v6 for Figma-generated React code. This time, we will cover what has changed in React Router v7 and how to migrate your existing v6 project.

Key Changes in React Router v7

The most important thing about the React Router v7 upgrade is this: if you already enabled all Future Flags in v6, nothing breaks. The React Router team shipped v7 changes as opt-in Future Flags throughout v6's later releases. Projects that turned those flags on only need to bump the version number.

Here are the major differences.

Area	v6	v7
Package	Separate react-router-dom	Unified react-router
Route definition	JSX component style	Object-based Data Router default
Data loading	useEffect inside components	loader functions on route definitions
Bundle size	Baseline	~15% smaller
Splat paths	Single segment *	Multi-segment splat support

Package Consolidation — No More react-router-dom

In v6, you installed react-router and react-router-dom separately. In v7, everything lives under a single react-router package. Every import that used to come from react-router-dom now comes from react-router.

Before (v6)

[code lang="js"] import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom'; [/code]

After (v7)

[code lang="js"] import { BrowserRouter, Routes, Route } from 'react-router'; import { Link, NavLink } from 'react-router'; [/code]

Swap the packages in your terminal.

[code lang="bash"] npm uninstall react-router-dom npm install react-router [/code]

Data Router — A New Way to Define Routes

createBrowserRouter existed in v6 as an option. In v7, this object-based Data Router is the recommended default.

v6 Style (JSX)

[code lang="js"] function App() { return ( <Route path="/" element={} /> <Route path="/about" element={} /> <Route path="/products" element={} /> <Route path="*" element={} /> ); } [/code]

v7 Recommended Style (Data Router)

[code lang="js"] import { createBrowserRouter, RouterProvider } from 'react-router';

const router = createBrowserRouter([ { path: '/', element: }, { path: '/about', element: }, { path: '/products', element: , loader: async () => { const res = await fetch('/api/products'); return res.json(); }, }, { path: '*', element: }, ]);

function App() { return ; } [/code]

The JSX style still works in v7. However, you need to switch to the Data Router style if you want to use features like loader and action.

Loader Functions — Replacing useEffect for Data Fetching

In v6, fetching data inside useEffect was the standard pattern. With v7's Data Router, you declare a loader function directly on the route definition.

v6 Approach (useEffect)

[code lang="js"] function Products() { const [products, setProducts] = useState([]);

useEffect(() => { fetch('/api/products') .then(res => res.json()) .then(data => setProducts(data)); }, []);

return ; } [/code]

v7 Approach (loader)

[code lang="js"] // Route definition { path: '/products', element: , loader: async () => { const res = await fetch('/api/products'); return res.json(); }, }

// Component import { useLoaderData } from 'react-router';

function Products() { const products = useLoaderData(); return ; } [/code]

The loader approach pre-fetches data during page transitions, which eliminates the flash of empty content. By the time the component renders, the data is already there.

Step-by-Step Migration

Here is the practical sequence for moving a v6 project to v7.

Step 1: Enable Future Flags First

In v6 (6.30+), you can opt into v7 behaviors one at a time. Turn them on and test before upgrading.

[code lang="js"] <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true, }}

[/code]

Step 2: Swap the Package

[code lang="bash"] npm uninstall react-router-dom npm install react-router [/code]

Step 3: Update Import Paths

Replace every react-router-dom import with react-router across the project.

Tell your AI assistant: "Replace all react-router-dom imports with react-router in this project. Keep functionality the same."

Step 4: Adopt Data Router (Optional)

If your existing JSX-based routes work fine, this step can wait. Convert pages gradually, starting with those that would benefit from loader or action.

Step 5: Deploy and Test

Server configuration (Nginx, Apache, Vercel, Netlify) is unchanged from v6. Check our React deployment guide for platform-specific settings.

Should You Upgrade Now?

The short answer is: there is no rush. v6 is still maintained and receiving security patches. That said, upgrading makes sense in these cases.

• Starting a new project — begin with v7 from day one
• Page transition loading states are getting complex — loader solves this cleanly
• You want a smaller bundle — about 15% reduction
• Migrating from Remix — v7 has merged with Remix

Wrap-Up

The React Router v7 upgrade comes down to three things: unified package (react-router), Data Router as the default, and loader functions for data fetching. If you enabled Future Flags in v6, the migration is just a package swap and import path update. Your existing v6 code will not break overnight, so take the transition at your own pace.