chore: change react-router package

Author: followynne

src/Serilog.Ui.Web/package.json

@@ -26,7 +26,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
-    "react-router-dom": "^7.3.0",
+    "react-router": "^7.3.0",
     "xml-formatter": "^3.6.4"
   },
   "devDependencies": {

src/Serilog.Ui.Web/src/__tests__/App.spec.tsx

@@ -2,7 +2,7 @@ import { render, within } from '@testing-library/react';
 import { act, render as customRender } from '__tests__/_setup/testing-utils';
 import App from 'app/App';
 import { routes } from 'app/routes';
-import { RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { RouterProvider, createMemoryRouter } from 'react-router';
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 const propsMock = {

src/Serilog.Ui.Web/src/__tests__/components/ErrorPage.spec.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 const mockFn = vi.hoisted(() => vi.fn());
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
   return {
     Link: ({ children }: { children: ReactNode }) => <a>{children}</a>,
     isRouteErrorResponse: mockFn,

src/Serilog.Ui.Web/src/__tests__/components/HomePageNotAuthorized.spec.tsx

@@ -7,7 +7,7 @@ const propsMock = {
   setAuthenticatedFromAccessDenied: vi.fn(),
   blockHomeAccess: false,
 };
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
   return {
     Navigate: () => <div>Move to</div>,
   };

src/Serilog.Ui.Web/src/__tests__/components/Index.spec.tsx

@@ -1,6 +1,6 @@
 import { act, render, within } from '__tests__/_setup/testing-utils';
 import { Index } from 'app/components/Index';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 
 const propsMock = {

src/Serilog.Ui.Web/src/app/App.tsx

@@ -1,7 +1,7 @@
 import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from 'react-router';
 import { theme } from 'style/theme';
 import { AuthPropertiesProvider } from './hooks/useAuthProperties';
 import { useSerilogUiProps } from './hooks/useSerilogUiProps';

src/Serilog.Ui.Web/src/app/components/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Text } from '@mantine/core';
 import { IconArrowBarRight, IconBackspace, IconMoodSad } from '@tabler/icons-react';
 import { serilogUiUrl } from 'app/util/prettyPrints';
-import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { Link, isRouteErrorResponse, useRouteError } from 'react-router';
 
 export const ErrorBoundaryPage = () => {
   const error = useRouteError();

src/Serilog.Ui.Web/src/app/components/HomePageNotAuthorized.tsx

@@ -1,7 +1,7 @@
 import { Box, Text } from '@mantine/core';
 import { useQueryAuth } from 'app/hooks/useQueryAuth';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 import AuthorizeButton from './Authorization/AuthorizeButton';
 
 export const HomePageNotAuthorized = () => {

src/Serilog.Ui.Web/src/app/components/Index.tsx

@@ -8,7 +8,7 @@ import { useCloseOnResize } from 'app/hooks/useCloseOnResize';
 import { useQueryAuth } from 'app/hooks/useQueryAuth';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
 import { Suspense, lazy } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 
 const AppBody = lazy(() => import('./AppBody'));
 const Head = lazy(() => import('./ShellStructure/Header'));

src/Serilog.Ui.Web/src/app/routes.tsx

@@ -1,5 +1,5 @@
 import { FormProvider } from 'react-hook-form';
-import { Outlet, RouteObject } from 'react-router-dom';
+import { Outlet, RouteObject } from 'react-router';
 import { ErrorBoundaryPage } from './components/ErrorPage';
 import { HomePageNotAuthorized } from './components/HomePageNotAuthorized';
 import { Index } from './components/Index';