OPHJOD-1117: Upgrade react-router to version 7

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": {

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;

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',
   }),

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<string, string>) => {

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();

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();

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(
   <StrictMode>
     <HelmetProvider>
-      <RouterProvider
-        router={router}
-        future={{
-          v7_startTransition: true,
-        }}
-      />
+      <RouterProvider router={router} />
     </HelmetProvider>
   </StrictMode>,
 );

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;

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,

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';