feat: replace react-router-dom with react-router

oedotme · oedotme · commit 0d314b0fb487 · 2025-02-07T17:37:30.000+01:00
diff --git a/examples/react-router-custom-path/client/src/pages/(auth)/_layout.tsx b/examples/react-router-custom-path/client/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
diff --git a/examples/react-router-custom-path/client/src/pages/+modal.tsx b/examples/react-router-custom-path/client/src/pages/+modal.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { useModals } from '@/router'
 
diff --git a/examples/react-router-custom-path/client/src/pages/_app.tsx b/examples/react-router-custom-path/client/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Link, useModals, useNavigate, useParams } from '../router'
 
diff --git a/examples/react-router-custom-path/client/src/pages/posts/[id]/index.tsx b/examples/react-router-custom-path/client/src/pages/posts/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 
 import { useParams } from '@/router'
 
diff --git a/examples/react-router-custom-path/client/src/pages/posts/_layout.tsx b/examples/react-router-custom-path/client/src/pages/posts/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function About() {
   return (
diff --git a/examples/react-router-custom-path/client/src/routes.tsx b/examples/react-router-custom-path/client/src/routes.tsx
@@ -1,6 +1,6 @@
 import { Fragment, JSX, Suspense } from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router-dom'
-import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router-dom'
+import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router'
+import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from '@generouted/react-router/core'
 
diff --git a/examples/react-router-custom-path/package.json b/examples/react-router-custom-path/package.json
@@ -13,7 +13,7 @@
     "@generouted/react-router": "^1.19.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/examples/react-router-custom/package.json b/examples/react-router-custom/package.json
@@ -13,7 +13,7 @@
     "@generouted/react-router": "^1.19.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/examples/react-router-custom/src/pages/(auth)/_layout.tsx b/examples/react-router-custom/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
diff --git a/examples/react-router-custom/src/pages/+modal.tsx b/examples/react-router-custom/src/pages/+modal.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { useModals } from '@/router'
 
diff --git a/examples/react-router-custom/src/pages/_app.tsx b/examples/react-router-custom/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Link, useModals, useNavigate, useParams } from '../router'
 
diff --git a/examples/react-router-custom/src/pages/posts/[id]/index.tsx b/examples/react-router-custom/src/pages/posts/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 
 import { useParams } from '@/router'
 
diff --git a/examples/react-router-custom/src/pages/posts/_layout.tsx b/examples/react-router-custom/src/pages/posts/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function About() {
   return (
diff --git a/examples/react-router-custom/src/routes.tsx b/examples/react-router-custom/src/routes.tsx
@@ -1,6 +1,6 @@
 import { Fragment, JSX, Suspense } from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router-dom'
-import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router-dom'
+import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router'
+import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from '@generouted/react-router/core'
 
diff --git a/examples/react-router-mdx/package.json b/examples/react-router-mdx/package.json
@@ -15,7 +15,7 @@
     "@mdx-js/rollup": "^3.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/examples/react-router-mdx/src/pages/(auth)/_layout.tsx b/examples/react-router-mdx/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
diff --git a/examples/react-router-mdx/src/pages/+modal.tsx b/examples/react-router-mdx/src/pages/+modal.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { useModals } from '@/router'
 
diff --git a/examples/react-router-mdx/src/pages/_app.tsx b/examples/react-router-mdx/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Link, useModals, useNavigate, useParams } from '../router'
 
diff --git a/examples/react-router-mdx/src/pages/posts/[id]/index.tsx b/examples/react-router-mdx/src/pages/posts/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 
 import { useParams } from '@/router'
 
diff --git a/examples/react-router-mdx/src/pages/posts/_layout.tsx b/examples/react-router-mdx/src/pages/posts/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function About() {
   return (
diff --git a/examples/react-router-route-modals/package.json b/examples/react-router-route-modals/package.json
@@ -13,7 +13,7 @@
     "@generouted/react-router": "^1.19.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/examples/react-router-route-modals/src/pages/(auth)/_layout.tsx b/examples/react-router-route-modals/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
diff --git a/examples/react-router-route-modals/src/pages/+modal.tsx b/examples/react-router-route-modals/src/pages/+modal.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { useModals } from '@/router'
 
diff --git a/examples/react-router-route-modals/src/pages/_app.tsx b/examples/react-router-route-modals/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Link, useModals, useNavigate, useParams } from '../router'
 
diff --git a/examples/react-router-route-modals/src/pages/gallery.tsx b/examples/react-router-route-modals/src/pages/gallery.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@/router'
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 const timestamps = [...Array(8)].map((_, index) => index + 1)
 
diff --git a/examples/react-router-route-modals/src/pages/posts/[id]/index.tsx b/examples/react-router-route-modals/src/pages/posts/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 
 import { useParams } from '@/router'
 
diff --git a/examples/react-router-route-modals/src/pages/posts/_layout.tsx b/examples/react-router-route-modals/src/pages/posts/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function About() {
   return (
diff --git a/examples/react-router/package.json b/examples/react-router/package.json
@@ -13,7 +13,7 @@
     "@generouted/react-router": "^1.19.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/examples/react-router/src/pages/(auth)/_layout.tsx b/examples/react-router/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function Layout() {
   return (
diff --git a/examples/react-router/src/pages/+modal.tsx b/examples/react-router/src/pages/+modal.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { useModals } from '@/router'
 
diff --git a/examples/react-router/src/pages/_app.tsx b/examples/react-router/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Link, useModals, useNavigate, useParams } from '../router'
 
diff --git a/examples/react-router/src/pages/posts/[id]/index.tsx b/examples/react-router/src/pages/posts/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 
 import { useParams } from '@/router'
 
diff --git a/examples/react-router/src/pages/posts/_layout.tsx b/examples/react-router/src/pages/posts/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function About() {
   return (
diff --git a/explorer/package.json b/explorer/package.json
@@ -13,7 +13,7 @@
     "@generouted/react-router": "^1.19.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5"
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
diff --git a/explorer/src/components/routes.tsx b/explorer/src/components/routes.tsx
@@ -1,5 +1,5 @@
 import { generateRegularRoutes, patterns } from '@generouted/react-router/core'
-import { Link, Location, RouteObject, useLocation } from 'react-router-dom'
+import { Link, Location, RouteObject, useLocation } from 'react-router'
 
 import { Arrow, Directory, File } from '@/icons'
 import { classNames } from '@/utils'
diff --git a/explorer/src/pages/(auth)/_layout.tsx b/explorer/src/pages/(auth)/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Container } from '@/components'
 
diff --git a/explorer/src/pages/+info.tsx b/explorer/src/pages/+info.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import { Arrow } from '@/icons'
 import { useModals } from '@/router'
diff --git a/explorer/src/pages/_app.tsx b/explorer/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Routes, Container } from '@/components'
 
diff --git a/explorer/src/pages/blog/_layout.tsx b/explorer/src/pages/blog/_layout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Container } from '@/components'
 
diff --git a/packages/generouted/package.json b/packages/generouted/package.json
@@ -94,7 +94,7 @@
     "@types/react-dom": "^19.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5",
+    "react-router": "^7.1.5",
     "solid-js": "^1.9.4",
     "typescript": "^5.7.3",
     "vite": "^6.1.0",
diff --git a/packages/generouted/readme.md b/packages/generouted/readme.md
@@ -47,7 +47,7 @@ There are also Vite plugins available for some integrations to provide type-safe
 
 - 📁 Client-side file-based routing
 - ⚡ Powered by [Vite](https://vitejs.dev)
-- ✨ React support with [`react-router-dom`](https://github.com/remix-run/react-router) or [`@tanstack/router`](https://github.com/tanstack/router) 🧪 or [`@tanstack/react-location`](https://github.com/tanstack/router/tree/9c8eb043e4ac350fc1d28655542e01defb0c82e5) 🚨
+- ✨ React support with [`react-router`](https://github.com/remix-run/react-router) or [`@tanstack/router`](https://github.com/tanstack/router) 🧪 or [`@tanstack/react-location`](https://github.com/tanstack/router/tree/9c8eb043e4ac350fc1d28655542e01defb0c82e5) 🚨
 - ✨ Solid support with [`@solidjs/router`](https://github.com/solidjs/solid-router)
 - ✨ File-based MDX routes with React or Solid, requires [`@mdx-js/rollup`](https://mdxjs.com/packages/rollup) [installation and setup](/examples/react-router-mdx)
 - 🔐 Type-safe navigation
@@ -83,7 +83,7 @@ In case you don't have a Vite project with React and TypeScript, check [Vite doc
 #### Installation
 
 ```shell
-pnpm add @generouted/react-router react-router-dom
+pnpm add @generouted/react-router react-router
 ```
 
 #### Setup
@@ -454,7 +454,7 @@ There are multiple approaches to achieve that. If you prefer handling the logic
 ```tsx
 // src/config/redirects.tsx
 
-import { Navigate, useLocation } from 'react-router-dom'
+import { Navigate, useLocation } from 'react-router'
 
 import { useAuth } from '../context/auth'
 import { Path } from '../router'
@@ -481,7 +481,7 @@ Then use that component (`<Redirects>` ) at the root-level layout `src/pages/_ap
 ```tsx
 // src/pages/_app.tsx
 
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Redirects } from '../config/redirects'
 
@@ -517,7 +517,7 @@ You can use the exported `routes` object to customize the router or to use hash/
 
 ```tsx
 import { createRoot } from 'react-dom/client'
-import { RouterProvider, createHashRouter } from 'react-router-dom'
+import { RouterProvider, createHashRouter } from 'react-router'
 import { routes } from '@generouted/react-router'
 
 const router = createHashRouter(routes)
diff --git a/packages/generouted/src/react-router-lazy.tsx b/packages/generouted/src/react-router-lazy.tsx
@@ -1,6 +1,6 @@
 import { Fragment, JSX, Suspense } from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router-dom'
-import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router-dom'
+import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router'
+import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './core'
 
diff --git a/packages/generouted/src/react-router.tsx b/packages/generouted/src/react-router.tsx
@@ -1,6 +1,6 @@
 import { Fragment, JSX, Suspense } from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router-dom'
-import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router-dom'
+import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router'
+import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './core'
 
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -87,14 +87,14 @@
   "devDependencies": {
     "@generouted/core": "workspace:*",
     "@types/react": "^19.0.8",
-    "react-router-dom": "^7.1.5",
+    "react-router": "^7.1.5",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3",
     "vite": "^6.1.0"
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-router-dom": ">=6",
+    "react-router": ">=7",
     "vite": ">=5"
   }
 }
diff --git a/packages/react-router/readme.md b/packages/react-router/readme.md
@@ -15,7 +15,7 @@ In case you don't have a Vite project with React and TypeScript, check [Vite doc
 ### Installation
 
 ```shell
-pnpm add @generouted/react-router react-router-dom
+pnpm add @generouted/react-router react-router
 ```
 
 ### Setup
@@ -59,7 +59,7 @@ export default function Home() {
 ```tsx
 // src/pages/_app.tsx
 
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 export default function App() {
   return (
@@ -134,7 +134,7 @@ To navigate to a modal use `useModals` hook exported from `src/router.ts`:
 ```tsx
 // src/pages/_app.tsx
 
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { useModals } from '../router'
 
diff --git a/packages/react-router/src/client/components.tsx b/packages/react-router/src/client/components.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { generatePath, Link, Navigate } from 'react-router-dom'
+import { generatePath, Link, Navigate } from 'react-router'
 import { LinkProps, To } from './types'
 
 type LinkRef = React.ForwardedRef<HTMLAnchorElement>
diff --git a/packages/react-router/src/client/hooks.ts b/packages/react-router/src/client/hooks.ts
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react'
-import { generatePath, NavigateOptions as NavOptions, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { generatePath, NavigateOptions as NavOptions, useLocation, useNavigate, useParams } from 'react-router'
 import { NavigateOptions, To } from './types'
 
 export const hooks = <Path extends string, Params extends Record<string, any>, ModalPath extends string>() => {
diff --git a/packages/react-router/src/client/types.ts b/packages/react-router/src/client/types.ts
@@ -1,4 +1,4 @@
-import { LinkProps as _LinkProps, NavigateOptions as NavOptions, NavigateProps as NavProps } from 'react-router-dom'
+import { LinkProps as _LinkProps, NavigateOptions as NavOptions, NavigateProps as NavProps } from 'react-router'
 
 export type To<Pathname = string> = { pathname: Pathname; search?: string; hash?: string }
 
diff --git a/packages/react-router/src/client/utils.ts b/packages/react-router/src/client/utils.ts
diff --git a/packages/react-router/tsup.config.ts b/packages/react-router/tsup.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Outlet } from 'react-router-dom'`
	`1`	`+import { Outlet } from 'react-router'`
`2`	`2`
`3`	`3`	`export default function Layout() {`
`4`	`4`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useLocation } from 'react-router-dom'`
	`1`	`+import { useLocation } from 'react-router'`
`2`	`2`
`3`	`3`	`import { useModals } from '@/router'`
`4`	`4`