feat: init

projects/translate-h5/src/route/render-routes.tsx

@@ -1,27 +1,48 @@
-import {Route, Routes} from 'react-router-dom';
-import {routes, AppRoute} from './routes';
-import AuthRoute from './auth.tsx';
+import { Route, Routes } from "react-router-dom";
+import { routes, AppRoute } from "./routes";
+import AuthRoute from "./auth.tsx";
+import { Suspense } from "react";
+import { DotLoading } from "antd-mobile";
 
 /**
  * 渲染路由
  * @constructor RenderRoutes
  */
 export const RenderRoutes = () => {
-    const renderRoutes = (routes: AppRoute[]) => {
-        return routes.map(route => (
-            <Route
-                key={route.path}
-                path={route.path}
-                element={
-                    <AuthRoute auth={route.auth}>
-                        {route.element}
-                    </AuthRoute>
-                }
-            >
-                {route.children && renderRoutes(route.children)}
-            </Route>
-        ));
-    };
+  const renderRoutes = (routes: AppRoute[]) => {
+    return routes.map((route) => (
+      <Route
+        key={route.path}
+        path={route.path}
+        element={
+          <AuthRoute auth={route.auth} path={route.path} meta={route.meta}>
+            {route.element}
+          </AuthRoute>
+        }
+      >
+        {route.children && renderRoutes(route.children)}
+      </Route>
+    ));
+  };
 
-    return <Routes>{renderRoutes(routes)}</Routes>;
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "12px",
+          }}
+        >
+          <DotLoading />
+        </div>
+      }
+    >
+      <Routes>{renderRoutes(routes)}</Routes>
+    </Suspense>
+  );
 };