From c4af5c5e5ec6b8b97e05b85e00dc662a0f3e9b73 Mon Sep 17 00:00:00 2001 From: Sauli Anto Date: Mon, 9 Dec 2024 10:42:28 +0200 Subject: [PATCH] OPHJOD-1117: Upgrade react-router to version 7 --- package-lock.json | 74 +++++++++++-------- package.json | 2 +- src/components/LanguageMenu/LanguageMenu.tsx | 2 +- .../NavigationBar/NavigationBar.test.tsx | 2 +- .../useLocalizedRoutes.test.tsx | 4 +- .../useLocalizedRoutes/useLocalizedRoutes.tsx | 2 +- src/hooks/useLoginLink/index.ts | 2 +- src/main.tsx | 16 ++-- src/routes/Home/Home.tsx | 2 +- src/routes/Root/Root.tsx | 2 +- src/routes/index.tsx | 2 +- 11 files changed, 60 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ce678d..9876bf3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "react-helmet-async": "^2.0.5", "react-i18next": "^15.1.1", "react-icons": "^5.3.0", - "react-router-dom": "^6.28.0", + "react-router": "^7.0.2", "web-vitals": "^4.2.4" }, "devDependencies": { @@ -3105,15 +3105,6 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, - "node_modules/@remix-run/router": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", - "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", - "license": "MIT", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.26.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz", @@ -3788,6 +3779,12 @@ "license": "MIT", "peer": true }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -5036,6 +5033,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-js-compat": { "version": "3.39.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz", @@ -9763,35 +9769,27 @@ "license": "MIT" }, "node_modules/react-router": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", - "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz", + "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0" + "@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" - } - }, - "node_modules/react-router-dom": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", - "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", - "license": "MIT", - "dependencies": { - "@remix-run/router": "1.21.0", - "react-router": "6.28.0" + "react": ">=18", + "react-dom": ">=18" }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } } }, "node_modules/read-cache": { @@ -10222,6 +10220,12 @@ "node": ">=10" } }, + "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==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -11073,6 +11077,12 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "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==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 1e0ef43..df359cf 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react-helmet-async": "^2.0.5", "react-i18next": "^15.1.1", "react-icons": "^5.3.0", - "react-router-dom": "^6.28.0", + "react-router": "^7.0.2", "web-vitals": "^4.2.4" }, "devDependencies": { diff --git a/src/components/LanguageMenu/LanguageMenu.tsx b/src/components/LanguageMenu/LanguageMenu.tsx index 97b5cc3..dc969a8 100644 --- a/src/components/LanguageMenu/LanguageMenu.tsx +++ b/src/components/LanguageMenu/LanguageMenu.tsx @@ -2,7 +2,7 @@ import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { langLabels, supportedLanguageCodes } from '@/i18n/config'; import { PopupList, cx } from '@jod/design-system'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router'; export interface LanguageMenuProps { inline?: boolean; diff --git a/src/components/NavigationBar/NavigationBar.test.tsx b/src/components/NavigationBar/NavigationBar.test.tsx index cb49917..3c06155 100644 --- a/src/components/NavigationBar/NavigationBar.test.tsx +++ b/src/components/NavigationBar/NavigationBar.test.tsx @@ -8,7 +8,7 @@ vi.mock('@jod/design-system', () => ({ useMediaQueries: vi.fn(), })); -vi.mock('react-router-dom', () => ({ +vi.mock('react-router', () => ({ useLocation: () => ({ pathname: 'callback-url', }), diff --git a/src/hooks/useLocalizedRoutes/useLocalizedRoutes.test.tsx b/src/hooks/useLocalizedRoutes/useLocalizedRoutes.test.tsx index a6a20d6..8f009bc 100644 --- a/src/hooks/useLocalizedRoutes/useLocalizedRoutes.test.tsx +++ b/src/hooks/useLocalizedRoutes/useLocalizedRoutes.test.tsx @@ -1,11 +1,11 @@ import { renderHook } from '@testing-library/react'; import { useTranslation } from 'react-i18next'; -import { useMatches, useParams } from 'react-router-dom'; +import { useMatches, useParams } from 'react-router'; import { Mock, beforeEach, describe, expect, it, vi } from 'vitest'; import { useLocalizedRoutes } from './useLocalizedRoutes'; // Mock the necessary hooks -vi.mock('react-router-dom', () => ({ +vi.mock('react-router', () => ({ useMatches: vi.fn(), useParams: vi.fn(), generatePath: vi.fn((path: string, params: Record) => { diff --git a/src/hooks/useLocalizedRoutes/useLocalizedRoutes.tsx b/src/hooks/useLocalizedRoutes/useLocalizedRoutes.tsx index c44bd99..b290bc6 100644 --- a/src/hooks/useLocalizedRoutes/useLocalizedRoutes.tsx +++ b/src/hooks/useLocalizedRoutes/useLocalizedRoutes.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { generatePath, useMatches, useParams } from 'react-router-dom'; +import { generatePath, useMatches, useParams } from 'react-router'; export const useLocalizedRoutes = () => { const matches = useMatches(); diff --git a/src/hooks/useLoginLink/index.ts b/src/hooks/useLoginLink/index.ts index 47a16c5..672129d 100644 --- a/src/hooks/useLoginLink/index.ts +++ b/src/hooks/useLoginLink/index.ts @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router'; export const useLoginLink = () => { const { i18n } = useTranslation(); diff --git a/src/main.tsx b/src/main.tsx index 348484a..ad608b9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,13 +1,18 @@ import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { HelmetProvider } from 'react-helmet-async'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import { createBrowserRouter, RouterProvider } from 'react-router'; import { Metric } from 'web-vitals'; import './i18n/config'; import './index.css'; import { routes } from './routes'; -const router = createBrowserRouter(routes, { basename: '/ohjaaja' }); +const router = createBrowserRouter(routes, { + basename: '/ohjaaja', + future: { + v7_relativeSplatPath: true, + }, +}); const root = createRoot(document.getElementById('root')!); @@ -32,12 +37,7 @@ if (process.env.NODE_ENV !== 'production') { root.render( - + , ); diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index ff622bf..6178bb6 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -1,7 +1,7 @@ import { Title } from '@/components'; import { HeroCard, useMediaQueries } from '@jod/design-system'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router'; interface CardsProps { className?: string; diff --git a/src/routes/Root/Root.tsx b/src/routes/Root/Root.tsx index fcea818..437bdf4 100644 --- a/src/routes/Root/Root.tsx +++ b/src/routes/Root/Root.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Helmet } from 'react-helmet-async'; import { useTranslation } from 'react-i18next'; import { MdClose, MdMenu } from 'react-icons/md'; -import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom'; +import { NavLink, Outlet, ScrollRestoration } from 'react-router'; import { LogoEuEn, LogoEuFi, diff --git a/src/routes/index.tsx b/src/routes/index.tsx index a9d044e..ff8a98b 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,5 +1,5 @@ import i18n from '@/i18n/config'; -import { RouteObject, redirect } from 'react-router-dom'; +import { RouteObject, redirect } from 'react-router'; import { Home } from './Home'; import { NoMatch, Root } from './Root';