chore: drop Node 20 and refresh all lockfile entries

.github/workflows/test.yml

@@ -56,7 +56,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: ["20", "22"]
+        node-version: ["22", "24"]
 
     steps:
       - uses: actions/checkout@v4

README.md

@@ -97,7 +97,7 @@ If you prefer not to use Docker or want to develop Fussel, you can install it lo
 
 - **Python** 3.10+
 - **uv** - Python package manager ([install](https://docs.astral.sh/uv/getting-started/installation/))
-- **Node.js** v20.19+ or v22.13+ (LTS recommended)
+- **Node.js** v22.22.2+ or v24.15+ (v20.19+ / v22.13+ is enough to build a site, but the JS tests need the newer versions)
 - **Yarn** 1.22+ (required)
 - **Make** (optional, but recommended for easier setup)
 

fussel/web/package.json

@@ -12,7 +12,7 @@
     "react-modal": "^3.16.3",
     "react-photo-album": "^3.6.1",
     "react-responsive-masonry": "^2.9.0",
-    "react-router-dom": "^7.18.4",
+    "react-router": "^8.4.0",
     "swiper": "^14.3.0"
   },
   "scripts": {
@@ -23,13 +23,13 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.2",
-    "@testing-library/jest-dom": "~6.9.1",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@vitejs/plugin-react": "^6.1.2",
-    "@vitest/coverage-v8": "^4.1.11",
-    "jsdom": "^29.1.1",
+    "@vitest/coverage-v8": "^5.0.3",
+    "jsdom": "^30.1.2",
     "vite": "^8.3.3",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.3"
   },
   "browserslist": {
     "production": [

fussel/web/src/component/App.jsx

@@ -4,7 +4,7 @@ import Collections from "./Collections";
 import Collection from "./Collection";
 import NotFound from "./NotFound";
 import { site_data } from "../_gallery/site_data.js"
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 
 export default class App extends Component {

fussel/web/src/component/App.test.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import App from './App';
 
 // Mock site_data

fussel/web/src/component/Collection.jsx

@@ -13,7 +13,7 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import Modal from 'react-modal';
 
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import "./Collection.css";
 import TimelineScrollbar from "./TimelineScrollbar";
 

fussel/web/src/component/Collection.test.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import Collection from './Collection';
 
 // Mock data imports

fussel/web/src/component/Collections.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { albums_data } from "../_gallery/albums_data.js"
 import { people_data } from "../_gallery/people_data.js"
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import "./Collections.css";
 
 import withRouter from './withRouter';

fussel/web/src/component/Collections.test.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import Collections from './Collections';
 
 // Mock data imports

fussel/web/src/component/Navbar.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet, NavLink } from "react-router-dom";
+import { Outlet, NavLink } from "react-router";
 import "./Navbar.css";
 import logo from '../images/animal-track-transparent-2.png';
 

fussel/web/src/component/Navbar.test.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import Navbar from './Navbar';
 
 describe('Navbar', () => {

fussel/web/src/component/NotFound.test.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import NotFound from './NotFound';
 
 // Mock withRouter

fussel/web/src/index.jsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./component/App";
 import "./index.css";
 
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 
 ReactDOM.createRoot(document.getElementById("app")).render(
   <React.StrictMode>