Move router-devtools to react-router-devtools

docs/framework/react/devtools.md

@@ -15,31 +15,31 @@ When you begin your TanStack Router journey, you'll want these devtools by your
 The devtools are a separate package that you need to install:
 
 ```sh
-npm install -D @tanstack/router-devtools
+npm install -D @tanstack/react-router-devtools
 ```
 
 or
 
 ```sh
-pnpm add -D @tanstack/router-devtools
+pnpm add -D @tanstack/react-router-devtools
 ```
 
 or
 
 ```sh
-yarn add -D @tanstack/router-devtools
+yarn add -D @tanstack/react-router-devtools
 ```
 
 or
 
 ```sh
-bun add -D @tanstack/router-devtools
+bun add -D @tanstack/react-router-devtools
 ```
 
 ## Import the Devtools
 
 ```js
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 ```
 
 ## Only importing and using Devtools in Development
@@ -52,7 +52,7 @@ const TanStackRouterDevtools =
     ? () => null // Render nothing in production
     : React.lazy(() =>
         // Lazy load in development
-        import('@tanstack/router-devtools').then((res) => ({
+        import('@tanstack/react-router-devtools').then((res) => ({
           default: res.TanStackRouterDevtools,
           // For Embedded Mode
           // default: res.TanStackRouterDevtoolsPanel
@@ -117,7 +117,7 @@ Floating Mode will mount the devtools as a fixed, floating element in your app a
 Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
 
 ```js
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 function App() {
   return (
@@ -153,7 +153,7 @@ function App() {
 Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
 
 ```js
-import { TanStackRouterDevtoolsPanel } from '@tanstack/router-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 
 function App() {
   return (

docs/framework/react/migrate-from-react-location.md

@@ -25,7 +25,7 @@ In this guide we'll go over the process of migrating the [React Location Basic e
 First, we need to install the dependencies for TanStack Router.
 
 ```sh
-npm install @tanstack/react-router @tanstack/router-devtools
+npm install @tanstack/react-router @tanstack/react-router-devtools
 ```
 
 And remove the React Location dependencies.
@@ -85,7 +85,7 @@ mkdir src/routes
 ```tsx
 // src/routes/__root.tsx
 import { createRootRoute, Outlet, Link } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: () => {

docs/framework/react/quick-start.md

@@ -30,18 +30,18 @@ Follow the prompts to setup the project.
 
 ```sh
 npm install @tanstack/react-router
-npm install -D @tanstack/router-plugin @tanstack/router-devtools
+npm install -D @tanstack/router-plugin @tanstack/react-router-devtools
 # or
 pnpm add @tanstack/react-router
-pnpm add -D @tanstack/router-plugin @tanstack/router-devtools
+pnpm add -D @tanstack/router-plugin @tanstack/react-router-devtools
 # or
 yarn add @tanstack/react-router
-yarn add -D @tanstack/router-plugin @tanstack/router-devtools
+yarn add -D @tanstack/router-plugin @tanstack/react-router-devtools
 # or
 bun add @tanstack/react-router
-bun add -D @tanstack/router-plugin @tanstack/router-devtools
+bun add -D @tanstack/router-plugin @tanstack/react-router-devtools
 # or
-deno add npm:@tanstack/react-router npm:@tanstack/router-plugin npm:@tanstack/router-devtools
+deno add npm:@tanstack/react-router npm:@tanstack/router-plugin npm:@tanstack/react-router-devtools
 ```
 
 #### Configure the Vite Plugin
@@ -80,7 +80,7 @@ All routes/\*.tsx files should export an object named **Route**, created using c
 
 ```tsx
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: () => (
@@ -187,7 +187,7 @@ import {
   createRoute,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 const rootRoute = createRootRoute({
   component: () => (

e2e/react-router/basic-esbuild-file-based/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/zod-adapter": "workspace:^",
     "react": "^18.2.0",

e2e/react-router/basic-esbuild-file-based/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/basic-file-based-code-splitting/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

e2e/react-router/basic-file-based-code-splitting/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/basic-file-based/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/zod-adapter": "workspace:^",
     "react": "^18.2.0",

e2e/react-router/basic-file-based/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/basic-react-query-file-based/package.json

@@ -14,7 +14,7 @@
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-query-devtools": "^5.62.3",
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

e2e/react-router/basic-react-query-file-based/src/routes/__root.tsx

@@ -4,7 +4,7 @@ import {
   Outlet,
   createRootRouteWithContext,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 

e2e/react-router/basic-react-query/package.json

@@ -14,7 +14,7 @@
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-query-devtools": "^5.62.3",
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"

e2e/react-router/basic-react-query/src/main.tsx

@@ -10,7 +10,7 @@ import {
   createRouter,
   useRouter,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import {
   QueryClient,

e2e/react-router/basic-scroll-restoration/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
     "@tanstack/react-virtual": "^3.11.1",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"

e2e/react-router/basic-scroll-restoration/src/main.tsx

@@ -10,7 +10,7 @@ import {
   createRouter,
   useElementScrollRestoration,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import HasShown from './has-shown'
 

e2e/react-router/basic-virtual-file-based/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/virtual-file-routes": "workspace:^",
     "react": "^18.2.0",

e2e/react-router/basic-virtual-file-based/src/routes/root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/basic-virtual-named-export-config-file-based/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/virtual-file-routes": "workspace:^",
     "react": "^18.2.0",

e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/basic/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"

e2e/react-router/basic/src/main.tsx

@@ -8,7 +8,7 @@ import {
   createRoute,
   createRouter,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { NotFoundError, fetchPost, fetchPosts } from './posts'
 import type { ErrorComponentProps } from '@tanstack/react-router'
 

e2e/react-router/rspack-basic-file-based/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redaxios": "^0.5.1"

e2e/react-router/rspack-basic-file-based/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/rspack-basic-virtual-named-export-config-file-based/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redaxios": "^0.5.1"

e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/react-router/scroll-restoration-sandbox-vite/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/zod-adapter": "workspace:^",
     "react": "^18.2.0",

e2e/react-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx

@@ -6,7 +6,7 @@ import {
   createRootRoute,
   linkOptions,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   component: RootComponent,

e2e/start/basic-auth/app/routes/__root.tsx

@@ -4,7 +4,7 @@ import {
   ScrollRestoration,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Meta, Scripts, createServerFn } from '@tanstack/start'
 import * as React from 'react'
 

e2e/start/basic-auth/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@prisma/client": "5.22.0",
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/start": "workspace:^",
     "prisma": "^5.22.0",
     "react": "^18.3.1",

e2e/start/basic-react-query/app/routes/__root.tsx

@@ -5,7 +5,7 @@ import {
   createRootRouteWithContext,
 } from '@tanstack/react-router'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import type { QueryClient } from '@tanstack/react-query'

e2e/start/basic-react-query/package.json

@@ -15,7 +15,7 @@
     "@tanstack/react-query-devtools": "^5.62.3",
     "@tanstack/react-router": "workspace:^",
     "@tanstack/react-router-with-query": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/start": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

e2e/start/basic-rsc/app/routes/__root.tsx

@@ -4,7 +4,7 @@ import {
   ScrollRestoration,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'

e2e/start/basic-rsc/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@babel/plugin-syntax-typescript": "^7.25.9",
     "@tanstack/react-router": "workspace:^",
-    "@tanstack/router-devtools": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/start": "workspace:^",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.5.5",

e2e/start/basic/app/routes/__root.tsx

@@ -5,7 +5,7 @@ import {
   ScrollRestoration,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Meta, Scripts } from '@tanstack/start'
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'