diff --git a/package.json b/package.json
index a0d757c..5d12b28 100644
--- a/package.json
+++ b/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",
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index 882ee8d..7a4b2d6 100644
--- a/src/client/components/App.tsx
+++ b/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";
diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index 293982c..79d5805 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/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";
diff --git a/src/client/components/ComicDetail/ComicDetailContainer.tsx b/src/client/components/ComicDetail/ComicDetailContainer.tsx
index 312def2..387df04 100644
--- a/src/client/components/ComicDetail/ComicDetailContainer.tsx
+++ b/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";
diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx
index 2998d02..195f6dd 100644
--- a/src/client/components/ComicDetail/DownloadsPanel.tsx
+++ b/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;
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 8e475c7..1d0eeb0 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/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";
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx
index 47a4e79..0c13131 100644
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/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";
diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx
index ebf0382..e3d77ce 100644
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/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";
diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx
index 61ba8e1..a4bf08c 100644
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/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";
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 3d4bde2..9b0529d 100644
--- a/src/client/components/Library/Library.tsx
+++ b/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";
diff --git a/src/client/components/Library/LibraryGrid.tsx b/src/client/components/Library/LibraryGrid.tsx
index 04c7a85..110ce78 100644
--- a/src/client/components/Library/LibraryGrid.tsx
+++ b/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 {}
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index f31f028..875ee2a 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/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;
diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx
index c4021fb..099b7db 100644
--- a/src/client/components/Volumes/Volumes.tsx
+++ b/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";
diff --git a/src/client/components/shared/Header.tsx b/src/client/components/shared/Header.tsx
index 4b00744..552a217 100644
--- a/src/client/components/shared/Header.tsx
+++ b/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;
diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx
index 09af1f8..6e861d6 100644
--- a/src/client/components/shared/Navbar2.tsx
+++ b/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 => {
diff --git a/src/client/index.tsx b/src/client/index.tsx
index c4fd879..2216898 100644
--- a/src/client/index.tsx
+++ b/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: ,
+ errorElement: ,
+ children: [
+ { path: "/", element: },
+ { path: "dashboard", element: },
+ { path: "settings", element: },
+ { path: "library", element: },
+ { path: "comic/details/:comicObjectId", element: },
+ { path: "import", element: },
+ { path: "search", element: },
+ { path: "volume/details/:comicObjectId", element: },
+ { path: "volumes", element: },
+ { path: "wanted", element: },
+ ],
+ },
+ ],
{
- path: "/",
- element: ,
- errorElement: ,
- children: [
- { path: "/", element: },
- { path: "dashboard", element: },
- { path: "settings", element: },
- {
- path: "library",
- element: ,
- },
- {
- path: "comic/details/:comicObjectId",
- element: ,
- },
- { path: "import", element: },
- { path: "search", element: },
- { path: "volume/details/:comicObjectId", element: },
- { path: "volumes", element: },
- { path: "wanted", element: },
- ],
- },
-]);
-
-root.render(
-
-
- ,
+ 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(
+
+
+
+ );
+} else {
+ console.error("Root element not found");
+}
diff --git a/yarn.lock b/yarn.lock
index 4553d9f..5d6e98d 100644
--- a/yarn.lock
+++ b/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"