🔧 Upgraded react-router to 7 and refactored

package.json

@@ -64,8 +64,7 @@
     "react-i18next": "^14.1.0",
     "react-loader-spinner": "^4.0.0",
     "react-modal": "^3.15.1",
-    "react-router": "^6.9.0",
-    "react-router-dom": "^6.9.0",
+    "react-router": "^7.1.5",
     "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.2",
     "react-sliding-pane": "^7.1.0",

src/client/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { Navbar2 } from "./shared/Navbar2";
 import { ToastContainer } from "react-toastify";
 import "../assets/scss/App.scss";

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactElement, useCallback } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
 import { useQuery } from "@tanstack/react-query";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -13,7 +13,7 @@ import {
 } from "../../constants/endpoints";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 interface IDownloadsPanelProps {
   key: number;

src/client/components/Dashboard/PullList.tsx

@@ -4,7 +4,7 @@ import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";

src/client/components/Dashboard/RecentlyImported.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import Card from "../shared/Carda";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";

src/client/components/Dashboard/VolumeGroups.tsx

@@ -1,7 +1,7 @@
 import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 

src/client/components/Dashboard/WantedComicsList.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import Card from "../shared/Carda";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";

src/client/components/Library/Library.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, ReactElement, useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";

src/client/components/Library/LibraryGrid.tsx

@@ -14,7 +14,7 @@ import { isNil, isEmpty, isUndefined } from "lodash";
 import Masonry from "react-masonry-css";
 import Card from "../shared/Carda";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 
 interface ILibraryGridProps {}

src/client/components/Library/SearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const SearchBar = (props): ReactElement => {
   const { searchHandler } = props;

src/client/components/Volumes/Volumes.tsx

@@ -4,7 +4,7 @@ import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";

src/client/components/shared/Header.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type IHeaderProps = {
   headerContent: string;

src/client/components/shared/Navbar2.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useDarkMode } from "../../hooks/useDarkMode";
 
 export const Navbar2 = (): ReactElement => {

src/client/index.tsx

@@ -1,12 +1,8 @@
-import React from "react";
-import { render } from "react-dom";
 import { createRoot } from "react-dom/client";
 import App from "./components/App";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router";
 import Settings from "./components/Settings/Settings";
 import { ErrorPage } from "./components/shared/ErrorPage";
-const rootEl = document.getElementById("root");
-const root = createRoot(rootEl);
 import i18n from "./shared/utils/i18n.util";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Import from "./components/Import/Import";
@@ -20,34 +16,48 @@ import WantedComics from "./components/WantedComics/WantedComics";
 
 const queryClient = new QueryClient();
 
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <App />, 
+      errorElement: <ErrorPage />, 
+      children: [
+        { path: "/", element: <Dashboard /> },
+        { path: "dashboard", element: <Dashboard /> },
+        { path: "settings", element: <Settings /> },
+        { path: "library", element: <TabulatedContentContainer category="library" /> },
+        { path: "comic/details/:comicObjectId", element: <ComicDetailContainer /> },
+        { path: "import", element: <Import path={"./comics"} /> },
+        { path: "search", element: <Search /> },
+        { path: "volume/details/:comicObjectId", element: <VolumeDetails /> },
+        { path: "volumes", element: <Volumes /> },
+        { path: "wanted", element: <WantedComics /> },
+      ],
+    },
+  ],
   {
-    path: "/",
-    element: <App />,
-    errorElement: <ErrorPage />,
-    children: [
-      { path: "/", element: <Dashboard /> },
-      { path: "dashboard", element: <Dashboard /> },
-      { path: "settings", element: <Settings /> },
-      {
-        path: "library",
-        element: <TabulatedContentContainer category="library" />,
-      },
-      {
-        path: "comic/details/:comicObjectId",
-        element: <ComicDetailContainer />,
-      },
-      { path: "import", element: <Import path={"./comics"} /> },
-      { path: "search", element: <Search /> },
-      { path: "volume/details/:comicObjectId", element: <VolumeDetails /> },
-      { path: "volumes", element: <Volumes /> },
-      { path: "wanted", element: <WantedComics /> },
-    ],
-  },
-]);
-
-root.render(
-  <QueryClientProvider client={queryClient}>
-    <RouterProvider router={router} />
-  </QueryClientProvider>,
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
+    },
+  }
 );
+
+const rootElement = document.getElementById("root");
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider
+        router={router}
+        future={{ v7_startTransition: true }}
+      />
+    </QueryClientProvider>
+  );
+} else {
+  console.error("Root element not found");
+}

yarn.lock

@@ -2343,11 +2343,6 @@
     "@react-hook/event" "^1.2.1"
     "@react-hook/throttle" "^2.2.0"
 
-"@remix-run/router@1.22.0":
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.22.0.tgz#dd8096cb055c475a4de6b35322b8d3b118c17b43"
-  integrity sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==
-
 "@rollup/plugin-node-resolve@^15.0.1":
   version "15.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz#66008953c2524be786aa319d49e32f2128296a78"
@@ -3267,6 +3262,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
+  integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
+
 "@types/cross-spawn@^6.0.2":
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.6.tgz#0163d0b79a6f85409e0decb8dcca17147f81fd22"
@@ -4795,6 +4795,11 @@ cookie@0.7.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
   integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
 core-js-compat@^3.40.0:
   version "3.40.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.40.0.tgz#7485912a5a4a4315c2fdb2cbdc623e6881c88b38"
@@ -9362,20 +9367,15 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-router-dom@^6.9.0:
-  version "6.29.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.29.0.tgz#2ffb56b03ef3d6d6daafcfad9f3922132d2ced94"
-  integrity sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==
+react-router@^7.1.5:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.1.5.tgz#c9e19d329d9ce2215fdae844ab6b023b911094db"
+  integrity sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==
   dependencies:
-    "@remix-run/router" "1.22.0"
-    react-router "6.29.0"
-
-react-router@6.29.0, react-router@^6.9.0:
-  version "6.29.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.29.0.tgz#14a329ca838b4de048fc5cca82874b727ee546b7"
-  integrity sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==
-  dependencies:
-    "@remix-run/router" "1.22.0"
+    "@types/cookie" "^0.6.0"
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+    turbo-stream "2.4.0"
 
 react-select-async-paginate@^0.7.2:
   version "0.7.9"
@@ -9893,6 +9893,11 @@ serve-static@1.16.2:
     parseurl "~1.3.3"
     send "0.19.0"
 
+set-cookie-parser@^2.6.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
+  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
+
 set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -10617,6 +10622,11 @@ tui-jsdoc-template@^1.2.2:
   dependencies:
     cheerio "^0.22.0"
 
+turbo-stream@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/turbo-stream/-/turbo-stream-2.4.0.tgz#1e4fca6725e90fa14ac4adb782f2d3759a5695f0"
+  integrity sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==
+
 tween-functions@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"