组件外路由跳转

src/api/request/index.ts

@@ -1,5 +1,5 @@
 import { useUserSessionStore } from '@/store/userStore'
-import { useNavigateContext } from '@/router/context/NavigationContext'
+import { navigate } from '@/router/components/SetupNavigation'
 import { ResultEnum } from '#/enum'
 import { t } from '@/locales/i18n'
 import axios, { type AxiosError, type AxiosRequestConfig, type AxiosResponse } from 'axios'
@@ -10,7 +10,6 @@ import { BASE_URL, TIME_OUT } from './config'
 
 const handleNetworkError = (response: AxiosResponse) => {
   const { actions } = useUserSessionStore.getState()
-  // const { navigate } = useNavigateContext()
   if (!response) return
   let errMessage = '未知错误'
   const status = response?.status
@@ -23,8 +22,8 @@ const handleNetworkError = (response: AxiosResponse) => {
         errMessage = '未授权，请重新登录'
         // abortRequestFn()
         // logoutFn()
-        // navigate('/login')
         actions.clearUserInfoAndToken()
+        navigate('/login')
         break
       case 403:
         errMessage = '拒绝访问'
@@ -42,6 +41,8 @@ const handleNetworkError = (response: AxiosResponse) => {
         errMessage = 'token无效'
         // abortRequestFn()
         // logoutFn()
+        actions.clearUserInfoAndToken()
+        navigate('/login')
         break
       case 500:
         errMessage = '服务器端出错'
@@ -104,8 +105,6 @@ axiosInstance.interceptors.request.use(
       config.data = serialize(config.data)
       delete config.data.serialize
     }
-    const { navigate } = useNavigateContext()
-    navigate('/login')
     if (config.method === 'get') {
       config.paramsSerializer = function (params) {
         return qs.stringify(params, { arrayFormat: 'repeat' })

src/router/components/SetupNavigation.tsx

@@ -0,0 +1,12 @@
+import { type PropsWithChildren, useLayoutEffect } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router'
+
+export let navigate: NavigateFunction
+
+export const SetupNavigation = ({ children }: PropsWithChildren) => {
+  const navgation = useNavigate()
+  useLayoutEffect(() => {
+    navigate = navgation
+  }, [])
+  return <>{children}</>
+}

src/router/context/NavigationContext.tsx

@@ -1,17 +0,0 @@
-import { createContext, type PropsWithChildren, useContext } from 'react'
-import { useNavigate } from 'react-router'
-
-interface NavigationContextType {
-  navigate: ReturnType<typeof useNavigate>
-}
-
-const NavigationContext = createContext<NavigationContextType>({
-  navigate: () => {}
-})
-
-export const NavigationProvider = ({ children }: PropsWithChildren) => {
-  const navigate = useNavigate()
-  return <NavigationContext.Provider value={{ navigate }}>{children}</NavigationContext.Provider>
-}
-
-export const useNavigateContext = () => useContext(NavigationContext)

src/router/index.tsx

@@ -8,7 +8,7 @@ import { ERROR_ROUTE } from '@/router/routes/error-routes'
 import DashboardLayout from '@/layouts/dashboard'
 import PageError from '@/pages/sys/error/PageError'
 import Login from '@/pages/sys/login/Login'
-import { NavigationProvider } from './context/NavigationContext'
+import { SetupNavigation } from './components/SetupNavigation'
 
 const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env
 
@@ -33,9 +33,11 @@ export default function Router() {
   const PROTECTED_ROUTE: AppRouteObject = {
     path: '/',
     element: (
-      <ProtectedRoute>
-        <DashboardLayout />
-      </ProtectedRoute>
+      <SetupNavigation>
+        <ProtectedRoute>
+          <DashboardLayout />
+        </ProtectedRoute>
+      </SetupNavigation>
     ),
     children: [{ index: true, element: <Navigate to={HOMEPAGE} replace /> }, ...permissionRoutes]
   }
@@ -45,9 +47,5 @@ export default function Router() {
 
   const router = createHashRouter(routes)
 
-  return (
-    <NavigationProvider>
-      <RouterProvider router={router} />
-    </NavigationProvider>
-  )
+  return <RouterProvider router={router} />
 }