20241113-a

src/routes/RouterGuard.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Route } from 'react-router-dom';
+import path2components from '@/routes/path2Compoment';
+
+import { NotFound, Spinner } from 'amis';
+
+export default class RouterGuard extends React.Component<any, any> {
+    componentDidMount() {
+        this.refreshRoute();
+    }
+
+    state = {
+        pathname: '',
+        component: Spinner,
+    };
+
+    componentDidUpdate(
+        prevProps: Readonly<any>,
+        prevState: Readonly<any>,
+        snapshot?: any
+    ) {
+        this.refreshRoute();
+    }
+
+    refreshRoute = () => {
+        const pathname = this.props.location.pathname;
+        console.log('pathname is ', pathname);
+        if (this.state.pathname != pathname) {
+            this.setState({ pathname: pathname });
+            let path2ComponentItem = path2components.find((v) => {
+                let path = v.path;
+                if (path != null && !path.startsWith('/')) {
+                    path = '/' + path;
+                }
+                return path === pathname;
+            });
+
+            if (
+                path2ComponentItem != null &&
+                path2ComponentItem.component != null
+            ) {
+                this.setState({ component: path2ComponentItem.component });
+            } else {
+                this.setState({ component: NotFound });
+            }
+        }
+    };
+
+    render() {
+        return (
+            <Route
+                path={this.state.pathname}
+                component={this.state.component}
+                exact
+            />
+        );
+    }
+}

src/routes/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ToastComponent, AlertComponent } from 'amis';
+import { Route, Switch, Redirect, BrowserRouter } from 'react-router-dom';
+import { observer } from 'mobx-react';
+import { IMainStore } from '../stores';
+import Login from '../pages/Login';
+import AdminRoute from '../pages/admin';
+import Editor from '../pages/Editor';
+import Preview from '../pages/Preview';
+import basename from '@/utils/basename';
+
+export default observer(function ({ store }: { store: IMainStore }) {
+    return (
+        <BrowserRouter basename={basename}>
+            <div className="routes-wrapper">
+                <ToastComponent
+                    key="toast"
+                    position={'top-right'}
+                    theme={store.theme}
+                />
+                <AlertComponent key="alert" theme={store.theme} />
+                <Switch>
+                    <Route path={`/login`} component={Login} />
+                    <Route path={`/preview`} component={Preview} />
+                    <Route path="/edit/:id" component={Editor} />
+                    <Route path={''} component={AdminRoute} />
+                </Switch>
+            </div>
+        </BrowserRouter>
+    );
+});

src/routes/path2Compoment.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Dashboard from '@/pages/admin/Dashboard';
+
+const path2components = [
+    {
+        path: '/dashboard',
+        component: Dashboard,
+    },
+];
+
+export default path2components;