feat(packages): add route Transition animation

mufeng889 · Aug 8, 2024 · da94e7c · da94e7c
1 parent 8b27596
commit da94e7c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/packages/simple-router/src/router.tsx b/packages/simple-router/src/router.tsx
@@ -2,7 +2,7 @@ import type { Location, RouteObject } from 'react-router-dom';
 import { RouterProvider, createBrowserRouter, createHashRouter, createMemoryRouter } from 'react-router-dom';
 import type { BlockerFunction, Router as RemixRouter, RouterState } from '@remix-run/router';
 import type { ElegantConstRoute } from '@ohh-889/react-auto-route';
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import type { RouteLocationNamedRaw, RouteLocationNormalizedLoaded, Router, RouterOptions } from './types';
 import CreateRouterMatcher from './matcher';
 import type { RouteRecordNormalized } from './matcher/types';
@@ -191,7 +191,7 @@ class CreateRouter {
     };
   }
 
-  CustomRouterProvider: () => JSX.Element = () => {
+  CustomRouterProvider: (loading:React.ReactNode) => JSX.Element = (loading) => {
     const reactiveRoute = {} as RouteLocationNormalizedLoaded;
     // eslint-disable-next-line guard-for-in
     for (const key in START_LOCATION_NORMALIZED) {
@@ -206,7 +206,7 @@ class CreateRouter {
       <RouterContext.Provider value={this}>
         <RouteContext.Provider value={reactiveRoute}>
           <RouterProvider
-            fallbackElement={'加载中'}
+            fallbackElement={loading}
             router={this.reactRouter}
           />
         </RouteContext.Provider>

diff --git a/packages/simple-router/src/types/index.ts b/packages/simple-router/src/types/index.ts
@@ -85,7 +85,7 @@ export interface Router {
   readonly reactRouter: RemixRouter;
   readonly reactRoutes: RouteObject[];
   addReactRoutes: (routes: ElegantConstRoute[]) => void;
-  CustomRouterProvider: () => JSX.Element;
+  CustomRouterProvider: (loading: React.ReactNode) => JSX.Element;
   getRoutes: () => RouteRecordNormalized[];
   getRouteByName: (name: string) => RouteRecordNormalized | undefined;
   resetRoute: () => void;

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import MenuProvider from '@/components/common/MenuProvider.tsx';
 import { router } from '@/router';
 import { antdLocales } from './locales/antd';
 import AppProvider from './components/common/AppProvider.tsx';
+import GlobalLoading from './components/common/GlobalLoading.tsx';
 
 const App = () => {
   const locale = useAppSelector(getLocale);
@@ -28,9 +29,7 @@ const App = () => {
       button={{ classNames: { icon: 'align-1px  text-icon' } }}
     >
       <MenuProvider>
-        <AppProvider>
-          <router.CustomRouterProvider />
-        </AppProvider>
+        <AppProvider>{router.CustomRouterProvider(<GlobalLoading />)}</AppProvider>
       </MenuProvider>
     </ConfigProvider>
   );