Upgrade to react-router v7

2026-04-11 00:56:16 +00:00 · 2025-01-23 18:05:48 +01:00
parent 7dac5da251
commit bbcd501518
7 changed files with 71 additions and 96 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
        "react-dom": "^18.3.1",
        "react-intl": "^6.8.9",
        "react-linkify": "^1.0.0-alpha",
-        "react-router-dom": "^6.28.2",
+        "react-router": "^7.1.3",
        "rehype-stringify": "^10.0.1",
        "remark-parse": "^11.0.0",
        "remark-rehype": "^11.1.1",
@@ -66,7 +66,6 @@
        "@types/md5": "^2.3.0",
        "@types/react": "^18.3.12",
        "@types/react-dom": "^18.3.0",
-        "@types/react-router-dom": "^5.3.3",
        "@typescript-eslint/eslint-plugin": "^4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "cypress": "^13.17.0",
@@ -3705,14 +3704,6 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
-    "node_modules/@remix-run/router": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz",
-      "integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4207,6 +4198,11 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
    "node_modules/@types/d3-array": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -4548,27 +4544,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18268,33 +18243,34 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.28.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz",
-      "integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
      "dependencies": {
-        "@remix-run/router": "1.21.1"
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
      },
      "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
      },
      "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
      }
    },
-    "node_modules/react-router-dom": {
-      "version": "6.28.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz",
-      "integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==",
-      "dependencies": {
-        "@remix-run/router": "1.21.1",
-        "react-router": "6.28.2"
-      },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "node": ">=18"
      }
    },
    "node_modules/react-scripts": {
@@ -19829,6 +19805,11 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -21623,6 +21604,11 @@
        "node": "*"
      }
    },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
    "node_modules/turbocommons-ts": {
      "version": "3.12.0",
      "resolved": "https://registry.npmjs.org/turbocommons-ts/-/turbocommons-ts-3.12.0.tgz",
@@ -25720,11 +25706,6 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
    },
-    "@remix-run/router": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz",
-      "integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg=="
-    },
    "@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26085,6 +26066,11 @@
        "@types/node": "*"
      }
    },
+    "@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
    "@types/d3-array": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -26428,27 +26414,6 @@
        "@types/react": "*"
      }
    },
-    "@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
    "@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -36455,20 +36420,21 @@
      "dev": true
    },
    "react-router": {
-      "version": "6.28.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz",
-      "integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
      "requires": {
-        "@remix-run/router": "1.21.1"
-      }
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
      },
-    "react-router-dom": {
-      "version": "6.28.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz",
-      "integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==",
-      "requires": {
-        "@remix-run/router": "1.21.1",
-        "react-router": "6.28.2"
+      "dependencies": {
+        "cookie": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+          "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
+        }
      }
    },
    "react-scripts": {
@@ -37583,6 +37549,11 @@
        "send": "0.19.0"
      }
    },
+    "set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
    "set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -38943,6 +38914,11 @@
        "safe-buffer": "^5.0.1"
      }
    },
+    "turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
    "turbocommons-ts": {
      "version": "3.12.0",
      "resolved": "https://registry.npmjs.org/turbocommons-ts/-/turbocommons-ts-3.12.0.tgz",
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
    "react-dom": "^18.3.1",
    "react-intl": "^6.8.9",
    "react-linkify": "^1.0.0-alpha",
-    "react-router-dom": "^6.28.2",
+    "react-router": "^7.1.3",
    "rehype-stringify": "^10.0.1",
    "remark-parse": "^11.0.0",
    "remark-rehype": "^11.1.1",
@@ -61,7 +61,6 @@
    "@types/md5": "^2.3.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "cypress": "^13.17.0",
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -11,7 +11,7 @@ import {IndiInfo} from 'topola';
 import {Intro} from './intro';
 import {Loader, Message, Portal, Tab} from 'semantic-ui-react';
 import {Media} from './util/media';
-import {Navigate, Route, Routes} from 'react-router-dom';
+import {Navigate, Route, Routes} from 'react-router';
 import {TopBar} from './menu/top_bar';
 import {TopolaData} from './util/gedcom_util';
 import {useEffect, useState} from 'react';
--- a/src/details/events.tsx
+++ b/src/details/events.tsx
@@ -13,7 +13,7 @@ import {
 } from '../util/gedcom_util';
 import {GedcomEntry} from 'parse-gedcom';
 import {FormattedMessage, IntlShape, useIntl} from 'react-intl';
-import {Link, useLocation} from 'react-router-dom';
+import {Link, useLocation} from 'react-router';
 import {pointerToId} from '../util/gedcom_util';
 import {TranslatedTag} from './translated-tag';
 import {Header, Item} from 'semantic-ui-react';
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,7 +8,7 @@ import messages_pl from './translations/pl.json';
 import messages_ru from './translations/ru.json';
 import {App} from './app';
 import {detect} from 'detect-browser';
-import {HashRouter as Router, Route} from 'react-router-dom';
+import {HashRouter as Router, Route} from 'react-router';
 import {IntlProvider} from 'react-intl';
 import {MediaContextProvider, mediaStyles} from './util/media';
 import './index.css';
--- a/src/intro.tsx
+++ b/src/intro.tsx
@@ -3,7 +3,7 @@ import {useEffect, useState} from 'react';
 import logo from './topola.jpg';
 import {Card, Grid, Image} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {Media} from './util/media';
 import {getChangelog, updateSeenVersion} from './changelog';

--- a/src/menu/top_bar.tsx
+++ b/src/menu/top_bar.tsx
@@ -2,7 +2,7 @@ import queryString from 'query-string';
 import {Dropdown, Icon, Menu} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {IndiInfo, JsonGedcomData} from 'topola';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {Media} from '../util/media';
 import {MenuType} from './menu_item';
 import {SearchBar} from './search';