Migrate and upgrade react router to v7 (#183)

* react-router v7 support

* Add beta version

* Update peer dependencies

* Bump version to 0.8.0

Author: sshyam-gupta

README.md

@@ -1,6 +1,8 @@
 # react-router-prompt 🚨
 
-> A component for the react-router 6 `Prompt`. Allows to create more flexible dialogs.
+> A component for the react-router-dom 6 / react-router 7 `Prompt`. Allows to create more flexible dialogs.
+
+Please follow [Note section](https://github.com/sshyam-gupta/react-router-prompt#note) for more details on react-router support
 
 [![npm version](https://img.shields.io/npm/v/react-router-prompt.svg)](https://www.npmjs.com/package/react-router-prompt)
 
@@ -16,7 +18,7 @@
 
 ### Prerequisite
 
-**React-router-dom >= 6.19** and can be used only with [**data routers**](https://reactrouter.com/en/6.8.1/routers/picking-a-router#using-v64-data-apis)
+**React-router-dom >= 7** and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)
 
 ```bash
 pnpm add react-router-prompt
@@ -69,12 +71,15 @@ yarn add react-router-prompt
 
 #### Note 🗒️
 
-This version works with react-router-dom >=v6.19
-Should be used within [data routers](https://reactrouter.com/en/6.8.1/routers/picking-a-router#using-v64-data-apis)
+This version works with react-router-dom >=v7 or react-router >=v7 and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)
+
+- For react-router support `(v7)` please install `v0.8.x`
+
+- For react-router-dom support `(v6.19.x - v6.28.1)` please install `v0.7.x`
 
-For react-router support `(v6 - v6.2.x)` please install v0.3.0
+- For react-router-dom support `(v6.7.x - v6.18.x)` please install `v0.5.4`
 
-For react-router support (v6.7.x - v6.18.x) please install v0.5.4
+- For react-router-dom support `(v6 - v6.2.x)` please install `v0.3.0`
 
 _Skipped support in middle due to breaking changes on react-router apis_
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.3",
+  "version": "0.8.0",
   "name": "react-router-prompt",
   "description": "React Router Navigation Prompt for v6",
   "type": "module",
@@ -60,7 +60,7 @@
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.22.1",
+    "react-router": "^7.1.1",
     "size-limit": "^11.0.2",
     "typescript": "^5.3.3",
     "vite": "^6.0.5",
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "react-router-dom": ">=6.19 <7"
+    "react-router": ">=7"
   },
   "size-limit": [
     {

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { BlockerFunction, Location } from "react-router-dom"
+import { BlockerFunction, Location } from "react-router"
 import usePrompt from "./use-prompt"
 import { useState } from "react"
 

src/hooks/use-confirm.ts

@@ -5,7 +5,7 @@ import {
   Blocker,
   BlockerFunction,
   Location,
-} from "react-router-dom"
+} from "react-router"
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.

src/hooks/use-prompt.ts

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react"
-import { BlockerFunction, Location } from "react-router-dom"
+import { BlockerFunction, Location } from "react-router"
 
 import useConfirm from "./hooks/use-confirm"
 import usePrompt from "./hooks/use-prompt"

src/index.tsx

@@ -1,11 +1,6 @@
 import React, { useState } from "react"
 import ReactDOM from "react-dom/client"
-import {
-  createBrowserRouter,
-  RouterProvider,
-  NavLink,
-  Outlet,
-} from "react-router-dom"
+import { createBrowserRouter, RouterProvider, Outlet, Link } from "react-router"
 
 import ReactRouterPrompt from "."
 
@@ -32,7 +27,7 @@ function Form() {
       <ReactRouterPrompt
         when={() => input.length >= 1}
         beforeConfirm={async () => {
-          await delayPromise()
+          // await delayPromise()
           await fetch("https://api.zippopotam.us/in/400072")
             .then((response) => response.text())
             .then((result) => console.log(result))
@@ -75,9 +70,9 @@ function Root() {
   return (
     <div>
       <nav>
-        <NavLink to="/">Home</NavLink>
+        <Link to="/">Home</Link>
         &nbsp;&nbsp;&nbsp;
-        <NavLink to="/promptable">Prompt</NavLink>
+        <Link to="/promptable">Prompt</Link>
       </nav>
       <Outlet />
     </div>

src/main.tsx

@@ -1,10 +1,10 @@
-import { resolve } from "path";
-import dts from "vite-plugin-dts";
-import tsConfigPaths from "vite-tsconfig-paths";
-import * as packageJson from "./package.json";
+import { resolve } from "path"
+import dts from "vite-plugin-dts"
+import tsConfigPaths from "vite-tsconfig-paths"
+import * as packageJson from "./package.json"
 
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -22,15 +22,19 @@ export default defineConfig({
       fileName: "react-router-prompt",
     },
     rollupOptions: {
-      external: [...Object.keys(packageJson.peerDependencies), 'react/jsx-runtime'],
+      external: [
+        ...Object.keys(packageJson.peerDependencies),
+        "react/jsx-runtime"
+      ],
       output: {
+        exports: "named",
         globals: {
-          'react': 'react',
-          'react-dom': 'ReactDOM',
-          'react-router-dom': 'reactRouterDom',
-          'react/jsx-runtime': 'react/jsx-runtime',
+          react: "react",
+          "react-dom": "ReactDOM",
+          "react-router": "reactRouter",
+          "react/jsx-runtime": "react/jsx-runtime",
         },
-      }
+      },
     },
-  }
-});
+  },
+})