reate-router 7.0.1

interface/authentication.ts

@@ -0,0 +1,54 @@
+import type { Path } from 'react-router';
+
+import type * as H from 'history';
+import { jwtDecode } from 'jwt-decode';
+import type { Me, SignInRequest, SignInResponse } from 'types';
+
+import { ACCESS_TOKEN, alovaInstance } from '../../api/endpoints';
+
+export const SIGN_IN_PATHNAME = 'loginPathname';
+export const SIGN_IN_SEARCH = 'loginSearch';
+
+export const verifyAuthorization = () =>
+  alovaInstance.Get('/rest/verifyAuthorization');
+export const signIn = (request: SignInRequest) =>
+  alovaInstance.Post<SignInResponse>('/rest/signIn', request);
+
+export function getStorage() {
+  return localStorage || sessionStorage;
+}
+
+export function storeLoginRedirect(location?: H.Location) {
+  if (location) {
+    getStorage().setItem(SIGN_IN_PATHNAME, location.pathname);
+    getStorage().setItem(SIGN_IN_SEARCH, location.search);
+  }
+}
+
+export function clearLoginRedirect() {
+  getStorage().removeItem(SIGN_IN_PATHNAME);
+  getStorage().removeItem(SIGN_IN_SEARCH);
+}
+
+export function fetchLoginRedirect(): Partial<Path> {
+  const signInPathname = getStorage().getItem(SIGN_IN_PATHNAME);
+  const signInSearch = getStorage().getItem(SIGN_IN_SEARCH);
+  clearLoginRedirect();
+  return {
+    pathname: signInPathname || `/dashboard`,
+    search: (signInPathname && signInSearch) || undefined
+  };
+}
+
+export const clearAccessToken = () => localStorage.removeItem(ACCESS_TOKEN);
+export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken);
+
+export function addAccessTokenParameter(url: string) {
+  const accessToken = getStorage().getItem(ACCESS_TOKEN);
+  if (!accessToken) {
+    return url;
+  }
+  const parsedUrl = new URL(url);
+  parsedUrl.searchParams.set(ACCESS_TOKEN, accessToken);
+  return parsedUrl.toString();
+}

interface/package.json

@@ -35,7 +35,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-toastify": "^10.0.6",
     "typesafe-i18n": "^5.26.2",
     "typescript": "^5.6.3"
@@ -50,7 +50,6 @@
     "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
     "concurrently": "^9.1.0",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",

interface/src/AppRouting.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import { toast } from 'react-toastify';
 
 import AuthenticatedRouting from 'AuthenticatedRouting';

interface/src/AuthenticatedRouting.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 
 import CustomEntities from 'app/main/CustomEntities';
 import Customizations from 'app/main/Customizations';

interface/src/app/main/CustomEntities.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
 import AddIcon from '@mui/icons-material/Add';

interface/src/app/main/Customizations.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useBlocker, useLocation } from 'react-router-dom';
+import { useBlocker, useLocation } from 'react-router';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';

interface/src/app/main/Devices.tsx

@@ -6,7 +6,7 @@ import {
   useState
 } from 'react';
 import { IconContext } from 'react-icons';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';

interface/src/app/main/Modules.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';

interface/src/app/main/Scheduler.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
 import AddIcon from '@mui/icons-material/Add';

interface/src/app/settings/network/Network.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useNavigate } from 'react-router';
 
 import { Tab } from '@mui/material';
 

interface/src/app/settings/security/ManageUsers.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';

interface/src/app/settings/security/Security.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 
 import { Tab } from '@mui/material';
 

interface/src/components/layout/Layout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import type { FC } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { Box, Toolbar } from '@mui/material';
 

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -15,8 +15,7 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
   const pathnames = useLocation()
     .pathname.split('/')
     .filter((x) => x);
-  const show_back = pathnames.length > 1;
-
+  const back_path = pathnames.length > 1 ? '/' + pathnames[0] : undefined;
   const navigate = useNavigate();
 
   return (
@@ -39,12 +38,12 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
           <MenuIcon />
         </IconButton>
 
-        {show_back && (
+        {back_path && (
           <IconButton
             sx={{ mr: 1 }}
             color="inherit"
             edge="start"
-            onClick={() => navigate(pathnames[0])}
+            onClick={() => navigate(back_path)}
           >
             <ArrowBackIcon />
           </IconButton>

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import type { SvgIconProps } from '@mui/material';

interface/src/components/layout/ListMenuItem.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import {

interface/src/components/routing/BlockNavigation.tsx

@@ -1,4 +1,4 @@
-import type { Blocker } from 'react-router-dom';
+import type { Blocker } from 'react-router';
 
 import {
   Button,

interface/src/components/routing/RequireAdmin.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import type { FC } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 
 import { AuthenticatedContext } from 'contexts/authentication';
 import type { RequiredChildrenProps } from 'utils';

interface/src/components/routing/RequireAuthenticated.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import type { FC } from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 
 import { storeLoginRedirect } from 'components/routing/authentication';
 import type { AuthenticatedContextValue } from 'contexts/authentication/context';

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import type { FC } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 
 import { fetchLoginRedirect } from 'components/routing/authentication';
 import { AuthenticationContext } from 'contexts/authentication';

interface/src/components/routing/RouterTabs.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 

interface/src/components/routing/authentication.ts

@@ -1,4 +1,4 @@
-import type { Path } from 'react-router-dom';
+import type { Path } from 'react-router';
 
 import type * as H from 'history';
 import { jwtDecode } from 'jwt-decode';

interface/src/components/routing/useRouterTab.ts

@@ -1,4 +1,4 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useMatch, useResolvedPath } from 'react-router';
 
 export const useRouterTab = () => {
   const routerTabPathMatch = useMatch(useResolvedPath(':tab').pathname);

interface/src/contexts/authentication/Authentication.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { FC } from 'react';
-import { redirect } from 'react-router-dom';
+import { redirect } from 'react-router';
 import { toast } from 'react-toastify';
 
 import { ACCESS_TOKEN } from 'api/endpoints';

interface/src/index.tsx

@@ -5,7 +5,7 @@ import {
   RouterProvider,
   createBrowserRouter,
   createRoutesFromElements
-} from 'react-router-dom';
+} from 'react-router';
 
 import App from 'App';
 

interface/src/utils/useRest.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
 import type { AlovaGenerics, Method } from 'alova';

interface/vite.config.ts

@@ -119,8 +119,6 @@ export default defineConfig(({ command, mode }) => {
             if (id.includes('node_modules')) {
               // creating a chunk to react routes deps. Reducing the vendor chunk size
               if (
-                id.includes('react-router-dom') ||
-                id.includes('@remix-run') ||
                 id.includes('react-router')
               ) {
                 return '@react-router';