Updating code to use new version of react-router.

app/package-lock.json

@@ -21,7 +21,7 @@
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-qr-code": "^2.0.11",
-        "react-router-dom": "^7.5.2",
+        "react-router": "^7.5.2",
         "react-scripts": "5.0.1",
         "react-semantic-toasts-2": "^0.6.7",
         "react-stl-viewer": "^2.5.0",
@@ -15637,22 +15637,6 @@
         }
       }
     },
-    "node_modules/react-router-dom": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz",
-      "integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==",
-      "license": "MIT",
-      "dependencies": {
-        "react-router": "7.5.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
     "node_modules/react-router/node_modules/cookie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
@@ -29911,14 +29895,6 @@
         }
       }
     },
-    "react-router-dom": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz",
-      "integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==",
-      "requires": {
-        "react-router": "7.5.2"
-      }
-    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

app/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-qr-code": "^2.0.11",
-    "react-router-dom": "^7.5.2",
+    "react-router": "^7.5.2",
     "react-scripts": "5.0.1",
     "react-semantic-toasts-2": "^0.6.7",
     "react-stl-viewer": "^2.5.0",

app/src/App.js

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import './App.css';
 import {NavBar} from "./components/Nav";
-import {createBrowserRouter, createRoutesFromElements, Link, Outlet, Route, RouterProvider} from "react-router-dom";
+import {createBrowserRouter, createRoutesFromElements, Link, Outlet, Route, RouterProvider} from "react-router";
 import {VideosRoute, VideoWrapper} from "./components/Videos";
 import AdminRoute from "./components/admin/AdminRoute";
 import {Container} from "semantic-ui-react";

app/src/DashboardPage.js

@@ -21,7 +21,7 @@ import {
     Statistic,
     StatisticGroup
 } from "./components/Theme";
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router";
 import {BandwidthProgressCombined, CPUUsageProgress} from "./components/admin/Status";
 import {ProgressPlaceholder} from "./components/Placeholder";
 import {GridColumn, GridRow, Icon, Input, Message} from "semantic-ui-react";

app/src/Tags.js

@@ -24,7 +24,7 @@ import _ from "lodash";
 import {HexColorPicker} from "react-colorful";
 import {useRecurringTimeout} from "./hooks/customHooks";
 import {Media, QueryContext, ThemeContext} from "./contexts/contexts";
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router";
 import {TagPlaceholder} from "./components/Placeholder";
 import {SortableTable} from "./components/SortableTable";
 

app/src/components/Apps.js

@@ -9,7 +9,7 @@ import {
     TableCell,
     TableRow
 } from "semantic-ui-react";
-import {Link, Route, Routes} from "react-router-dom";
+import {Link, Route, Routes} from "react-router";
 import {decryptOTP, encryptOTP} from "../api";
 import {
     APIButton,

app/src/components/Archive.js

@@ -46,7 +46,7 @@ import {
     untagFileGroup
 } from "../api";
 import {CollectionTagModal} from "./collections/CollectionTagModal";
-import {Link, Route, Routes, useLocation, useNavigate, useParams} from "react-router-dom";
+import {Link, Route, Routes, useLocation, useNavigate, useParams} from "react-router";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useArchive, useDomain, useDomains, useOneQuery, useSearchArchives, useSearchOrder} from "../hooks/customHooks";
 import {FileCards, FileRowTagIcon, FilesView} from "./Files";

app/src/components/Calculators.js

@@ -5,7 +5,7 @@ import {useCalcQuery} from "../hooks/customHooks";
 import {TemperatureCalculator} from "./calculators/TemperatureCalculator";
 import {ElectricalCalculators} from "./calculators/ElectricalCalculators";
 import {DipoleAntennaCalculator} from "./calculators/HamCalculators";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {RatioCalculators} from "./calculators/RatioCalculator";
 import {QRCodeCalculator} from "./calculators/QRCodeCalculator";
 

app/src/components/Channels.js

@@ -15,7 +15,7 @@ import {
     useTitle,
     WROLModeMessage
 } from "./Common";
-import {Link, useNavigate, useParams} from "react-router-dom";
+import {Link, useNavigate, useParams} from "react-router";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useChannel, useChannels, useOneQuery} from "../hooks/customHooks";
 import _ from "lodash";

app/src/components/Common.js

@@ -20,7 +20,7 @@ import {
     Search,
     Transition
 } from 'semantic-ui-react';
-import {Link, NavLink, useNavigate, useSearchParams} from "react-router-dom";
+import {Link, NavLink, useNavigate, useSearchParams} from "react-router";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useHotspot, useSearchDirectories, useSearchOrder, useThrottle, useWROLMode} from "../hooks/customHooks";
 import {Media, SettingsContext, StatusContext, ThemeContext} from "../contexts/contexts";

app/src/components/DomainEditPage.test.js

@@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event';
 import {DomainEditPage} from './Archive';
 
 // Mock useParams to return domain ID
-jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+    ...jest.requireActual('react-router'),
     useParams: () => ({domainId: '1'}),
     useNavigate: () => jest.fn(),
 }));

app/src/components/Download.js

@@ -13,7 +13,7 @@ import Icon from "semantic-ui-react/dist/commonjs/elements/Icon";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {Button, Form, FormInput, Header} from "./Theme";
 import {Form as SForm, FormDropdown} from "semantic-ui-react";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {TagsSelector} from "../Tags";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 import {

app/src/components/Files.js

@@ -41,7 +41,7 @@ import {
     useStatusFlag,
     useWROLMode
 } from "../hooks/customHooks";
-import {Route, Routes} from "react-router-dom";
+import {Route, Routes} from "react-router";
 import {CardPlaceholder} from "./Placeholder";
 import {ArchiveCard, ArchiveRowCells} from "./Archive";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";

app/src/components/Headline.js

@@ -3,7 +3,7 @@ import {Image, PlaceholderLine} from "semantic-ui-react";
 import React from "react";
 import {ThemeContext} from "../contexts/contexts";
 import {encodeMediaPath, FileIcon, findPosterPath, PreviewLink} from "./Common";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import _ from "lodash";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 import {FileRowTagIcon} from "./Files";

app/src/components/Inventory.js

@@ -23,7 +23,7 @@ import {
     TableHeaderCell,
     TableRow
 } from "semantic-ui-react";
-import {Route, Routes} from "react-router-dom";
+import {Route, Routes} from "react-router";
 import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks, useTitle} from './Common';
 import _ from 'lodash';
 import {ThemeContext} from "../contexts/contexts";

app/src/components/Map.js

@@ -12,7 +12,7 @@ import {
     useTitle,
     WROLModeMessage
 } from "./Common";
-import {Route, Routes} from "react-router-dom";
+import {Route, Routes} from "react-router";
 import {getMapImportStatus, importMapFiles} from "../api";
 import {
     Checkbox,

app/src/components/Nav.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Link, NavLink} from "react-router-dom";
+import {Link, NavLink} from "react-router";
 import {Dropdown, Icon as SIcon, Menu} from "semantic-ui-react";
 import {Media, SettingsContext, StatusContext, ThemeContext} from "../contexts/contexts";
 import {DarkModeToggle, HotspotStatusIcon, useLocalStorage} from "./Common";

app/src/components/Search.js

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Link, Route, Routes, useNavigate} from "react-router-dom";
+import {Link, Route, Routes, useNavigate} from "react-router";
 import {FilesSearchView} from "./Files";
 import {useLatestRequest, usePages, useSearchChannels, useSearchDate, useSearchFilter} from "../hooks/customHooks";
 import {ZimSearchView} from "./Zim";

app/src/components/VideoPlayer.js

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {deleteVideos, downloadVideoMetadata, tagFileGroup, untagFileGroup} from "../api";
-import {Link, useNavigate, useParams} from "react-router-dom";
+import {Link, useNavigate, useParams} from "react-router";
 import _ from "lodash";
 import {
     APIButton,

app/src/components/Videos.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {Link, Route, Routes, useParams} from "react-router-dom";
+import {Link, Route, Routes, useParams} from "react-router";
 import {
     APIButton,
     CardLink,

app/src/components/Zim.js

@@ -63,7 +63,7 @@ import {
 import {useSearch} from "./Search";
 import {TagsQuerySelector} from "./Files";
 import {ThemeContext} from "../contexts/contexts";
-import {Link, Route, Routes} from "react-router-dom";
+import {Link, Route, Routes} from "react-router";
 import {SortableTable} from "./SortableTable";
 import {toast} from "react-semantic-toasts-2";
 import _ from "lodash";

app/src/components/admin/AdminRoute.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Container} from "semantic-ui-react";
 import {getStatus, saveSettings} from "../../api";
 import {PageContainer, TabLinks, Toggle} from "../Common";
-import {Route, Routes} from "react-router-dom";
+import {Route, Routes} from "react-router";
 import {ThemeContext} from "../../contexts/contexts";
 import {Header, Loader, Segment} from "../Theme";
 import {DownloadsPage} from "./Downloads";

app/src/components/admin/Configs.js

@@ -3,7 +3,7 @@ import {Icon, Popup, Table} from "../Theme";
 import React from "react";
 import {TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "semantic-ui-react";
 import {TableRowPlaceholder} from "../Placeholder";
-import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router";
 
 function WarningIcon({ok}) {
     // null is empty, true is valid, false is invalid.

app/src/components/admin/Downloads.js

@@ -7,7 +7,7 @@ import {
     restartDownload,
     retryOnceDownloads
 } from "../../api";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {
     APIButton,
     DisableDownloadsToggle,

app/src/components/collections/CollectionTable.js

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {Message, Placeholder, PlaceholderHeader, PlaceholderLine, Table, TableCell, TableRow} from 'semantic-ui-react';
 import _ from 'lodash';
 import {SortableTable} from '../SortableTable';

app/src/hooks/customHooks.js

@@ -35,7 +35,7 @@ import {
     updateChannel,
     updateDomain,
 } from "../api";
-import {createSearchParams, useLocation, useSearchParams} from "react-router-dom";
+import {createSearchParams, useLocation, useSearchParams} from "react-router";
 import {enumerate, filterToMimetypes, humanFileSize, secondsToFullDuration} from "../components/Common";
 import {QueryContext, SettingsContext, StatusContext} from "../contexts/contexts";
 import {toast} from "react-semantic-toasts-2";

app/src/setupTests.js

@@ -1,6 +1,12 @@
 // Jest setup file for React Testing Library
 // This file is automatically loaded by Create React App before running tests
 
+// Polyfill TextEncoder/TextDecoder for react-router v7 compatibility
+// See: https://github.com/remix-run/react-router/issues/12363
+import { TextDecoder, TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
 import '@testing-library/jest-dom';
 
 // Set global Jest timeout to 30 seconds

app/src/test-utils.js

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import {render} from '@testing-library/react';
-import {BrowserRouter} from 'react-router-dom';
+import {BrowserRouter} from 'react-router';
 import {MediaContextProvider, ThemeContext} from './contexts/contexts';
 
 /**