TIW-48 Phase2: Core-fe Refactor - RouterProvider

example/page/Template/Template.tsx

@@ -1,21 +1,36 @@
+import {app} from "../../../src/app";
 import React from "react";
+import {useNavigate} from "react-router-dom";
 import {useModuleState} from "../../useModuleState";
 import {useLoadingStatus} from "../../../src";
 import {actions} from ".";
 import {Page as OperationPage} from "../Operation";
 
 export default function Example() {
+    const navigate = useNavigate();
     const loading = useLoadingStatus("abc");
     const {list, time} = useModuleState("Template");
 
+    const onItemClick = (item: string, index: number) => {
+        navigate(`/Template/${item}?index=${index}`);
+        // console.info("app router state >>>", app.getState("router"));
+    };
+
+    const onRefetch = () => {
+        actions.getTodoList();
+        navigate(`/Template`);
+    };
+
     return (
         <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
             <div>onTick: {time}</div>
             <OperationPage />
-            {loading ? <button onClick={actions.cancelGetTodoList}>cancel loading</button> : <button onClick={actions.getTodoList}>refetch</button>}
+            {loading ? <button onClick={actions.cancelGetTodoList}>cancel loading</button> : <button onClick={onRefetch}>refetch</button>}
             <div>{loading ? "loading" : null}</div>
-            {list.map(item => (
-                <div key={item}>{item}</div>
+            {list.map((item, index) => (
+                <div key={item} onClick={() => onItemClick(item, index)} style={{cursor: "pointer"}}>
+                    {item}
+                </div>
             ))}
         </div>
     );

example/page/Template/page.ts

@@ -29,6 +29,7 @@ export class MockData {
 
 class TemplateModule extends Module<RootState, "Template"> {
     override async onLocationMatched(routeParam: object, location: ModuleLocation<object>) {
+        // console.info("routeParam", routeParam, location);
         const list = await MockData.todoList();
     }
 

example/page/Template/route.tsx

@@ -4,10 +4,10 @@ import {async} from "../../../src";
 const route = {
     name: "Template",
     menu: "Template",
-    path: "Template",
+    path: "Template/:id?",
     role: "ADMIN",
     icon: <div />,
-    component: async(() => import("."), "Template"),
+    Component: async(() => import("."), "Template"),
     children: [],
 };
 export default route;

example/page/main/Main.tsx

@@ -1,16 +1,15 @@
 import "./index.css";
 import React from "react";
-import {Route} from "../../../src";
-import {RouteProps, Redirect} from "react-router";
-import {Switch} from "react-router-dom";
+import {Routes, Route, cloneRoute} from "../../../src";
+import {Navigate} from "react-router";
 import {RootState} from "../../type/state";
 import {FTIRoutes} from "../../route";
 import {FTIRoute} from "../../route/type";
 import {State as MainState} from "./type";
 
 interface Props extends Pick<MainState, "loading"> {}
 
-class Main extends React.Component<Props & RouteProps> {
+class Main extends React.Component<Props & any> {
     constructor(props: any) {
         super(props);
         this.state = {};
@@ -20,14 +19,16 @@ class Main extends React.Component<Props & RouteProps> {
         if (route?.hidden) return [];
         let routes = [];
         const path = this.pathName(route, parentPath);
-        if (route.component) {
+        if (route.Component) {
             if (route.role) {
-                routes.push(<Route key={path} path={path} component={route.component} />);
+                const clone = cloneRoute(<Route key={path} path={path} Component={route.Component} />);
+                routes.push(clone);
             } else {
                 return [];
             }
-        } else if (route.children && route.children.length > 0 && route.children[0].component) {
-            routes.push(<Route key={path} path={path} component={route.children[0].component} />);
+        } else if (route.children && route.children.length > 0 && route.children[0].Component) {
+            const clone = cloneRoute(<Route key={path} path={path} Component={route.children[0].Component} />);
+            routes.push(clone);
         }
         if (route.children) {
             for (const child of route.children) {
@@ -38,14 +39,12 @@ class Main extends React.Component<Props & RouteProps> {
     }
 
     override render() {
-        const {location} = this.props;
-
         return (
-            <Switch key={location && location.pathname} location={location}>
-                <Route exact key="/" path="/" component={() => <Redirect to="/Template" />} />
+            <Routes>
+                {cloneRoute(<Route caseSensitive key="/" path="/" Component={() => <Navigate to="/Template" />} />)}
 
                 {FTIRoutes.map(route => this.renderRoute(route))}
-            </Switch>
+            </Routes>
         );
     }
 

example/route/type.ts

@@ -6,7 +6,7 @@ export interface FTIRoute {
     menu?: string;
     icon?: React.ReactNode;
     role: string | null;
-    component?: ComponentType<any>;
+    Component?: ComponentType<any>;
     children?: FTIRoute[];
     hidden?: boolean;
     customBreadCrumbs?: React.ReactElement;

package.json

@@ -55,14 +55,12 @@
         "@types/react": "18.2.35",
         "@types/react-dom": "18.2.14",
         "@types/react-redux": "7.1.28",
-        "@types/react-router": "5.1.20",
-        "@types/react-router-dom": "5.3.3",
         "axios": "1.6.1",
         "core-js": "3.33.0",
         "history": "4.10.1",
         "immer": "10.0.3",
-        "react-router": "5.2.1",
-        "react-router-dom": "5.3.0",
+        "react-router": "6.22.3",
+        "react-router-dom": "6.22.3",
         "regenerator-runtime": "0.14.0",
         "tslib": "2.6.2",
         "zustand": "^4.5.2"
@@ -74,4 +72,4 @@
     "engines": {
         "node": ">=14"
     }
-}
+}