49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
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} path={route.path} meta={route.meta}>
|
|
{route.element}
|
|
</AuthRoute>
|
|
}
|
|
>
|
|
{route.children && renderRoutes(route.children)}
|
|
</Route>
|
|
));
|
|
};
|
|
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "24px",
|
|
}}
|
|
>
|
|
<DotLoading />
|
|
</div>
|
|
}
|
|
>
|
|
<Routes>{renderRoutes(routes)}</Routes>
|
|
</Suspense>
|
|
);
|
|
};
|