46:I[660678,["/_next/static/chunks/2t1119em3uggf.js","/_next/static/chunks/0z8znd68d3gbv.js","/_next/static/chunks/19fyfn-j_bqw4.js","/_next/static/chunks/0w40435yyf_aw.js","/_next/static/chunks/3p_8v12wc_rd3.js","/_next/static/chunks/0ipw6pdbca2nn.js","/_next/static/chunks/22ulpibmvf72b.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/0nsogqyo9f92a.js","/_next/static/chunks/3e6aahj543it1.js","/_next/static/chunks/2_7n0byq7kdc7.js","/_next/static/chunks/1umhym11g537p.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3ndfog0156ssk.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/385-w0fbog4mf.js","/_next/static/chunks/0oh_nmnt8b0xn.js","/_next/static/chunks/1gwg3oqv8zf-1.js","/_next/static/chunks/2nw5jdup18fxv.js","/_next/static/chunks/1zqqmzxxxprx1.js","/_next/static/chunks/32dzmzjp2_166.js","/_next/static/chunks/3tapih4gs2df1.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/03hsqimmwh7ta.js","/_next/static/chunks/35bufgnke20pg.js","/_next/static/chunks/1jmwt2w2uusdo.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/0a0b6s3o7q6fp.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 45:Tb84,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"arpit","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/54199516?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"react-router-v6-to-v7-full","item":"https://app.codemod.com/registry/react-router-v6-to-v7-full"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#webpage","url":"https://app.codemod.com/registry/react-router-v6-to-v7-full","name":"react-router-v6-to-v7-full - Codemod Registry","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#sourcecode","name":"react-router-v6-to-v7-full","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","url":"https://app.codemod.com/registry/react-router-v6-to-v7-full","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/54199516?v=4","isAccessibleForFree":true,"license":"MIT","codeRepository":"https://github.com/arpit2222/react-router-v6-to-v7","version":"1.0.0","keywords":["upgrade","breaking-change","react-router","v6-to-v7","react"],"datePublished":"2026-05-03 15:21:04.368113+00","dateModified":"2026-05-03 15:21:04.368113+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/react-router-v6-to-v7-full#app","name":"react-router-v6-to-v7-full codemod","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","url":"https://app.codemod.com/registry/react-router-v6-to-v7-full","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"1.0.0","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}47:T1a9b,# React Router v6 → v7 Migration Codemod > Automates 80%+ of the React Router v6 → v7 migration using ast-grep (jssg). --- ## 🖥 Live Playground Try it in your browser: **[https://react-router-codemod.vercel.app](https://react-router-codemod.vercel.app)** Paste any React Router v6 code on the left, click **→ Transform**, and see the v7 output instantly. --- ## Install & Run ### 🚀 Published Version (Quick Start) ```bash npx codemod react-router-v6-to-v7-pro ``` **Published Package**: Available on codemod registry • Basic migration transforms ### 🔧 Full Local Version (Advanced) ```bash git clone https://github.com/arpit2222/react-router-v6-to-v7 cd react-router-v6-to-v7 npm install npx ts-node tests/runner.ts # Verify tests # Run individual transforms from jssg/ directory ``` **Full Version Features**: 7 comprehensive transforms • AST-based precision • Zero false positives • Edge case handling --- ## What It Transforms ### 1. Import rewrites — `react-router-dom` → `react-router` ```ts // BEFORE import { Link, useNavigate } from 'react-router-dom' // AFTER import { Link, useNavigate } from 'react-router' ``` ### 2. RouterProvider — correctly splits to `react-router/dom` ```ts // BEFORE import { RouterProvider, Link } from 'react-router-dom' // AFTER import { RouterProvider } from 'react-router/dom' import { Link } from 'react-router' ``` The [official v7 upgrade guide](https://reactrouter.com/upgrading/v6) is explicit: `RouterProvider` must come from `react-router/dom`. Every other published codemod gets this wrong. ### 3. Future flags — BrowserRouter + createBrowserRouter ```tsx // BEFORE ... // AFTER ... ``` ```ts // BEFORE const router = createBrowserRouter(routes) // AFTER const router = createBrowserRouter(routes, { future: { v7_relativeSplatPath: true, v7_startTransition: true, ... } }) ``` Smart merge: if some flags are already present, only the missing ones are added. ### 4. `json()` / `defer()` removal ```ts // BEFORE export async function loader() { return json({ user: await getUser() }) } // AFTER export async function loader() { return { user: await getUser() } } ``` Two-argument `json(data, { status: 404 })` is intentionally skipped — removing it would silently drop the status code. ### 5. `fallbackElement` → `HydrateFallback` ```tsx // BEFORE } /> // AFTER {/* TODO: v7 migration — move fallbackElement to HydrateFallback on your root route */} ``` ### 6. `formMethod` uppercase normalization ```ts // BEFORE — silently returns false in v7 if (navigation.formMethod === "post") { } // AFTER if (navigation.formMethod === "POST") { } ``` ```tsx // BEFORE // AFTER ``` ### 7. `package.json` dependency update Removes `react-router-dom`, adds `react-router: ^7.0.0`. --- ## Real-World Testing Results | Repository | Stars | RR Version | Files Scanned | Files Modified | False Positives | |---|---|---|---|---|---| | remix-run/indie-stack | ~3k | ^6.x | 35 | 5 | 0 | | alan2207/bulletproof-react | ~28k | ^6.x | 425 | 2 | 0 | | marmelab/react-admin | ~25k | ^6.x | 1,678 | 54 | 0 | | novuhq/novu | ~35k | ^6.x | 6,452 | 210 | 0 | | **Total** | | | **8,590** | **271** | **0** | ✅ Zero false positives across 8,590 files including a large production monorepo. --- ## Test Suite ``` ━━━ React Router v6→v7 Codemod Test Suite ━━━ ✅ update-imports: PASS ✅ add-future-flags: PASS ✅ update-data-router: PASS (covers createBrowserRouter — Ankit's gap!) ✅ remove-json-defer: PASS ✅ migrate-fallback: PASS ✅ fix-form-method: PASS ✅ edge: named-reexport: PASS ✅ edge: mixed-import-split: PASS ✅ edge: type-only-import: PASS ✅ edge: partial-future-flags (false preserved): PASS ✅ edge: browserrouter-existing-props: PASS ✅ edge: aliased-import: PASS ✅ edge: dynamic-form-method (unchanged): PASS ✅ edge: no-router-imports (unchanged): PASS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Summary: 14/14 tests passing ✅ ``` Run it yourself: ```bash git clone https://github.com/arpit2222/react-router-v6-to-v7 cd react-router-v6-to-v7 npm install npm test ``` --- ## Safety Guarantees Every transform has three layers of protection: 1. **Fast early exit** — string `.includes()` check before any AST parsing 2. **AST precision** — imports matched by `kind: 'import_statement'` node, never by line regex; `formMethod` patterns anchor to `navigation.formMethod` or `fetcher.formMethod` specifically 3. **Try/catch on every transform** — any unexpected input returns the original source unchanged --- ## Edge Cases Handled | Edge case | Other codemods | This codemod | |---|---|---| | `RouterProvider` import path | `react-router` ❌ | `react-router/dom` ✅ | | `createBrowserRouter` future flags | ❌ | ✅ | | `export { X } from 'react-router-dom'` re-exports | ❌ | ✅ | | `import type { X }` type imports | drops `type` ❌ | preserves `type` ✅ | | Partial future flags already set | duplicates flags ❌ | adds only missing ✅ | | `json(data, { status: 404 })` two-arg form | silently drops status ❌ | skipped for manual review ✅ | | `formMethod` already uppercase | re-transforms ❌ | idempotent ✅ | | `

` | changes dynamic value ❌ | unchanged ✅ | --- ## Project Structure ``` react-router-v6-to-v7/ ├── codemod.yaml ├── workflow.yaml ├── jssg/ │ ├── update-imports.ts │ ├── add-future-flags.ts │ ├── update-data-router.ts │ ├── remove-json-defer.ts │ ├── migrate-fallback.ts │ ├── fix-form-method.ts │ └── update-package.ts ├── tests/ │ ├── runner.ts │ └── fixtures/ │ ├── input/ (15 test cases) │ └── expected/ (7 transform fixtures) │ └── output/ (8 edge-case fixtures) └── src/ (Live playground — Vite + React) ``` --- ## Codemod Registry **[https://codemod.com/registry/react-router-v6-to-v7](https://codemod.com/registry/react-router-v6-to-v7)** --- ## Links - [Live Playground](https://react-router-codemod.vercel.app) - [Official React Router v7 upgrade guide](https://reactrouter.com/upgrading/v6) - [Technical case study](./docs/case-study.md) - [Codemod Registry](https://codemod.com/registry/react-router-v6-to-v7) --- ## License MIT — [arpit2222](https://github.com/arpit2222) 48:T4aa,import { createBrowserRouter, createHashRouter, createMemoryRouter } from 'react-router'; const routes = [ { path: '/', element: '' }, { path: '/about', element: '' }, ]; // Case 1: no options object at all export const browserRouter = createBrowserRouter(routes, { future: { v7_relativeSplatPath: true, v7_startTransition: true, v7_fetcherPersist: true, v7_normalizeFormMethod: true, v7_partialHydration: true, v7_skipActionErrorRevalidation: true, } }); // Case 2: options object present but no future key export const hashRouter = createHashRouter(routes, { basename: '/app', future: { v7_relativeSplatPath: true, v7_startTransition: true, v7_fetcherPersist: true, v7_normalizeFormMethod: true, v7_partialHydration: true, v7_skipActionErrorRevalidation: true, } }); // Case 3: options object with partial future flags (smart merge) export const memoryRouter = createMemoryRouter(routes, { future: { v7_relativeSplatPath: true, v7_startTransition: true, v7_fetcherPersist: true, v7_normalizeFormMethod: true, v7_partialHydration: true, v7_skipActionErrorRevalidation: true, }, }); 17:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$45"}}],["$","$L46",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"0290ff94-ed09-4ba6-9f77-580636b30a8f","name":"react-router-v6-to-v7-full","displayName":"react-router-v6-to-v7-full","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","scope":null,"visibility":"public","downloadCount":2,"executionCount":0,"createdAt":"2026-05-03 15:21:04.368113+00","updatedAt":"2026-05-03 15:21:04.368113+00","latestVersion":"1.0.0","keywords":["upgrade","breaking-change","react-router","v6-to-v7","react"],"starCount":0,"author":"arpit2222 ","homepage":null,"repository":"https://github.com/arpit2222/react-router-v6-to-v7","license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$47","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"cae6e08f-2a78-4fd3-83d1-7ce31b73f3da","username":"arpit2222","name":"arpit","avatarUrl":"https://avatars.githubusercontent.com/u/54199516?v=4"},"isLegacy":false,"versions":[{"version":{"id":"0cf570d6-1db7-4a6a-be7c-dc2387f80930","packageId":"0290ff94-ed09-4ba6-9f77-580636b30a8f","version":"1.0.0","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","manifest":{"name":"react-router-v6-to-v7-full","author":"arpit2222 ","license":"MIT","targets":{"versions":{},"languages":["typescript"],"frameworks":[]},"version":"1.0.0","category":"migration","keywords":["upgrade","breaking-change","react-router","v6-to-v7","react"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","repository":"https://github.com/arpit2222/react-router-v6-to-v7","description":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.","dependencies":[],"schema_version":"1.0"},"checksum":"ece8bfb7ce7b8e3baf424554dcc460bcb49d7e55e8dc58a8e12ab7cfc1ab3ec9","size":121429,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/react-router-v6-to-v7-full/1.0.0/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","run"],"workflowMetadata":{"nodes":[{"id":"react-router-migration","name":"Migrate React Router v6 to v7","steps":[{"name":"Rewrite imports from react-router-dom to react-router","type":"js-ast-grep","language":"tsx"},{"name":"Add v7 future flags to BrowserRouter","type":"js-ast-grep","language":"tsx"},{"name":"Add v7 future flags to createBrowserRouter","type":"js-ast-grep","language":"tsx"},{"name":"Remove json() and defer() wrappers","type":"js-ast-grep","language":"tsx"},{"name":"Migrate fallbackElement to HydrateFallback","type":"js-ast-grep","language":"tsx"},{"name":"Fix formMethod to uppercase","type":"js-ast-grep","language":"tsx"},{"name":"Update package.json react-router-dom to react-router","type":"run"}]}]},"validated":false,"validationErrors":null,"publishedBy":"cae6e08f-2a78-4fd3-83d1-7ce31b73f3da","deprecated":false,"deprecationMessage":null,"downloadCount":2,"cachedTestCases":{"input":"import React from 'react';\nimport { BrowserRouter, Route, Routes } from 'react-router';\n\n// BrowserRouter with basename and one existing future flag — basename must be preserved,\n// missing five flags must be injected, existing flag value must not be overridden.\nexport function App() {\n return (\n \n \n } />\n \n \n );\n}\n","output":"import React from 'react';\nimport { BrowserRouter, Route, Routes } from 'react-router';\n\n// BrowserRouter with basename and one existing future flag — basename must be preserved,\n// missing five flags must be injected, existing flag value must not be overridden.\nexport function App() {\n return (\n \n \n } />\n \n \n );\n}\n","isValid":true,"examples":[{"name":"browserrouter-existing-props","path":"tests/fixtures/browserrouter-existing-props","input":"import React from 'react';\nimport { BrowserRouter, Route, Routes } from 'react-router';\n\n// BrowserRouter with basename and one existing future flag — basename must be preserved,\n// missing five flags must be injected, existing flag value must not be overridden.\nexport function App() {\n return (\n \n \n } />\n \n \n );\n}\n","output":"import React from 'react';\nimport { BrowserRouter, Route, Routes } from 'react-router';\n\n// BrowserRouter with basename and one existing future flag — basename must be preserved,\n// missing five flags must be injected, existing flag value must not be overridden.\nexport function App() {\n return (\n \n \n } />\n \n \n );\n}\n","filename":"browserrouter-existing-props.tsx"},{"name":"dynamic-form-method","path":"tests/fixtures/dynamic-form-method","input":"import { Form } from 'react-router';\n\n// JSX method prop with dynamic value — no comparison, no match.\nexport function MyForm({ method }: { method: string }) {\n return submit;\n}\n\n// formMethod on an unrelated object (req, not navigation/fetcher) — must not be changed.\nfunction check(req: { formMethod: string }) {\n if (req.formMethod === \"post\") {\n return true;\n }\n return req.formMethod !== \"get\";\n}\n","output":"import { Form } from 'react-router';\n\n// JSX method prop with dynamic value — no comparison, no match.\nexport function MyForm({ method }: { method: string }) {\n return ;\n}\n\n// formMethod on an unrelated object (req, not navigation/fetcher) — must not be changed.\nfunction check(req: { formMethod: string }) {\n if (req.formMethod === \"post\") {\n return true;\n }\n return req.formMethod !== \"get\";\n}\n","filename":"dynamic-form-method.tsx"},{"name":"migrate-fallback","path":"tests/fixtures/migrate-fallback","input":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { RouterProvider } from 'react-router/dom';\nimport { createBrowserRouter } from 'react-router';\nimport { LoadingSpinner } from './components/LoadingSpinner';\n\nconst router = createBrowserRouter([\n { path: '/', element: },\n { path: '/about', element: },\n]);\n\n// RouterProvider inside StrictMode — JSX comment context is valid here\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n } />\n \n);\n","output":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { RouterProvider } from 'react-router/dom';\nimport { createBrowserRouter } from 'react-router';\nimport { LoadingSpinner } from './components/LoadingSpinner';\n\nconst router = createBrowserRouter([\n { path: '/', element: },\n { path: '/about', element: },\n]);\n\n// RouterProvider inside StrictMode — JSX comment context is valid here\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n {/* TODO: v7 migration — move fallbackElement to HydrateFallback on your root route.\n Add: { path: '/', Component: Root, HydrateFallback: LoadingSpinner } */}\n \n \n);\n","filename":"migrate-fallback.tsx"},{"name":"package","path":"tests/fixtures/package","input":"{\n \"name\": \"my-react-app\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-router-dom\": \"^6.26.0\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5.3.0\",\n \"@types/react\": \"^18.2.0\",\n \"react-router-dom\": \"^6.26.0\"\n }\n}\n","output":"{\n \"name\": \"my-react-app\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-router\": \"^7.0.0\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5.3.0\",\n \"@types/react\": \"^18.2.0\"\n }\n}\n","filename":"package.json"},{"name":"partial-future-flags","path":"tests/fixtures/partial-future-flags","input":"import { createBrowserRouter } from 'react-router';\n\nconst routes = [{ path: '/', element: '' }];\n\n// One flag explicitly set to false — smart merge must preserve the false value.\nconst router = createBrowserRouter(routes, {\n future: {\n v7_relativeSplatPath: false,\n },\n});\n","output":"import { createBrowserRouter } from 'react-router';\n\nconst routes = [{ path: '/', element: '' }];\n\n// One flag explicitly set to false — smart merge must preserve the false value.\nconst router = createBrowserRouter(routes, {\n future: {\n v7_relativeSplatPath: false,\n v7_startTransition: true,\n v7_fetcherPersist: true,\n v7_normalizeFormMethod: true,\n v7_partialHydration: true,\n v7_skipActionErrorRevalidation: true,\n },\n});\n","filename":"partial-future-flags.tsx"},{"name":"remove-json-defer","path":"tests/fixtures/remove-json-defer","input":"import { json, defer, useLoaderData, useActionData } from 'react-router-dom';\n\n// loader: single-line json() wrapper\nexport async function loader() {\n return json({ user: await getUser(), posts: await getPosts() });\n}\n\n// deferredLoader: multi-line defer() wrapper\nexport async function deferredLoader() {\n return defer({\n data: getDataPromise(),\n more: getMorePromise(),\n });\n}\n\n// Component: uses OTHER hooks from the same import — must be preserved\nexport function Component() {\n const data = useLoaderData();\n const actionData = useActionData();\n return null;\n}\n","output":"import { useLoaderData, useActionData } from 'react-router-dom';\n\n// loader: single-line json() wrapper\nexport async function loader() {\n return { user: await getUser(), posts: await getPosts() };\n}\n\n// deferredLoader: multi-line defer() wrapper\nexport async function deferredLoader() {\n return {\n data: getDataPromise(),\n more: getMorePromise(),\n };\n}\n\n// Component: uses OTHER hooks from the same import — must be preserved\nexport function Component() {\n const data = useLoaderData();\n const actionData = useActionData();\n return null;\n}\n","filename":"remove-json-defer.tsx"},{"name":"update-data-router","path":"tests/fixtures/update-data-router","input":"import { createBrowserRouter, createHashRouter, createMemoryRouter } from 'react-router';\n\nconst routes = [\n { path: '/', element: '' },\n { path: '/about', element: '' },\n];\n\n// Case 1: no options object at all\nexport const browserRouter = createBrowserRouter(routes);\n\n// Case 2: options object present but no future key\nexport const hashRouter = createHashRouter(routes, {\n basename: '/app',\n});\n\n// Case 3: options object with partial future flags (smart merge)\nexport const memoryRouter = createMemoryRouter(routes, {\n future: {\n v7_relativeSplatPath: true,\n v7_startTransition: true,\n },\n});\n","output":"$48","filename":"update-data-router.ts"},{"name":"update-imports","path":"tests/fixtures/update-imports","input":"// App entry — mixed react-router-dom imports\nimport { BrowserRouter, Route, Routes, RouterProvider, Link, useNavigate } from 'react-router-dom';\nimport { createBrowserRouter, Outlet } from \"react-router-dom\";\nimport { NavLink as RouterNavLink, useParams } from 'react-router-dom';\n\nconst router = createBrowserRouter([\n { path: '/', element: },\n { path: '/about', element: },\n]);\n\nexport function Root() {\n return ;\n}\n\nexport function Nav() {\n const { id } = useParams();\n const navigate = useNavigate();\n\n return (\n \n );\n}\n\nexport function Layout() {\n return (\n \n \n } />\n \n \n );\n}\n","output":"// App entry — mixed react-router-dom imports\nimport { RouterProvider } from 'react-router/dom';\nimport { BrowserRouter, Route, Routes, Link, useNavigate } from 'react-router';\nimport { createBrowserRouter, Outlet } from \"react-router\";\nimport { NavLink as RouterNavLink, useParams } from 'react-router';\n\nconst router = createBrowserRouter([\n { path: '/', element: },\n { path: '/about', element: },\n]);\n\nexport function Root() {\n return ;\n}\n\nexport function Nav() {\n const { id } = useParams();\n const navigate = useNavigate();\n\n return (\n \n );\n}\n\nexport function Layout() {\n return (\n \n \n } />\n \n \n );\n}\n","filename":"update-imports.ts"}]},"defaultWorkflowName":"default","createdAt":"2026-05-03T15:21:04.368Z","updatedAt":"2026-05-26 08:41:23.761455+00"},"publishedBy":{"id":"cae6e08f-2a78-4fd3-83d1-7ce31b73f3da","username":"arpit2222","name":"arpit"},"insightsTemplate":{"packageVersionId":"0cf570d6-1db7-4a6a-be7c-dc2387f80930","status":"ready","generatedAt":"2026-07-21T16:18:16.243Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","run"],"workflowMetadata":{"nodes":[{"id":"react-router-migration","name":"Migrate React Router v6 to v7","steps":[{"name":"Rewrite imports from react-router-dom to react-router","type":"js-ast-grep","language":"tsx"},{"name":"Add v7 future flags to BrowserRouter","type":"js-ast-grep","language":"tsx"},{"name":"Add v7 future flags to createBrowserRouter","type":"js-ast-grep","language":"tsx"},{"name":"Remove json() and defer() wrappers","type":"js-ast-grep","language":"tsx"},{"name":"Migrate fallbackElement to HydrateFallback","type":"js-ast-grep","language":"tsx"},{"name":"Fix formMethod to uppercase","type":"js-ast-grep","language":"tsx"},{"name":"Update package.json react-router-dom to react-router","type":"run"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"1.0.0"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$17:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1787181359457,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"react-router-v6-to-v7-full","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"react-router-v6-to-v7-full\"},\"type\":\"query\"}]"}]},"children":"$L49"}]] 1a:null 1e:[["$","title","0",{"children":"react-router-v6-to-v7-full - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing."}],["$","meta","2",{"name":"author","content":"arpit"}],["$","meta","3",{"name":"keywords","content":"react-router-v6-to-v7-full, codemod, code transformation, automated refactoring, package, registry, upgrade, breaking-change, react-router, v6-to-v7, react"}],["$","meta","4",{"name":"creator","content":"arpit"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/react-router-v6-to-v7-full"}],["$","meta","20",{"property":"og:title","content":"react-router-v6-to-v7-full - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing."}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/react-router-v6-to-v7-full"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/react-router-v6-to-v7-full"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"react-router-v6-to-v7-full package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"react-router-v6-to-v7-full - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing."}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/react-router-v6-to-v7-full"}]]