byronzhu
2022-10-14 14:42:04 +08:00
```javascript
App.tsx
import React from "react";
import { BrowserRouter } from "react-router-dom";
import YYRouter from "./router";
function App() {
return (
<BrowserRouter>
<YYRouter />
</BrowserRouter>
);
}
export default React.memo(App);
router/index.tsx
import { useRoutes, Navigate } from "react-router-dom";
import { ItemType } from "antd/lib/menu/hooks/useItems";
import LayoutPage from "@/components/Layout";
import { observer } from "mobx-react-lite";
import { fetchAsyncRoute } from "./async";
import LoginPage from "@/pages/Login";
import NotFound from "@/pages/NotFound";
import { useLocation } from "react-router";
import { useApp } from "@/stores";
function YYRouter() {
const app = useApp();
const routes = fetchAsyncRoute(app.user);
const location = useLocation();
const items: ItemType[] = [];
if (app.loading) {
return useRoutes([
{
path: "/",
element: <></>,
children: [{ path: location.pathname, element: <></> }],
},
]);
}
routes.push({
path: "*",
element: <NotFound />,
});
for (let route of routes) {
if (route.item) {
items.push(route.item);
}
}
return useRoutes([
{
path: "/",
element: app.user ? (
<LayoutPage items={items} />
) : (
<Navigate to="/login" replace />
),
children: routes,
},
{
path: "/login",
element: app.user ? <Navigate to="/" replace /> : <LoginPage />,
},
]);
}
export default observer(YYRouter);
router/async.tsx
import { RouteObject } from "react-router-dom";
import { ItemType } from "antd/lib/menu/hooks/useItems";
import HomeRoute from "./modules/home";
import BannerRoute from "./modules/banner";
import RobotRoute from "./modules/robot";
import GivingRoute from "./modules/giving";
import PermissionRoute from "./modules/permission";
import UserRoute from "./modules/user";
import FinanceRoute from "./modules/finance";
import ApplyRoute from "./modules/apply";
import TimeLineRoute from "./modules/timeline";
interface ItemT extends RouteObject {
item?: ItemType;
}
export function fetchAsyncRoute(user?: Api.Admin): ItemT[] {
let routes: ItemT[] = [];
if (!user) return routes;
routes = routes.concat(HomeRoute);
if (user.role === "admin") {
routes = routes.concat(PermissionRoute);
}
if (user.role === "finance" || user.role === "customer_service") {
routes = routes.concat(UserRoute);
routes = routes.concat(FinanceRoute);
} else {
routes = routes.concat(BannerRoute);
routes = routes.concat(RobotRoute);
routes = routes.concat(GivingRoute);
routes = routes.concat(UserRoute);
routes = routes.concat(FinanceRoute);
routes = routes.concat(ApplyRoute);
routes = routes.concat(TimeLineRoute);
}
return routes;
}
```
这是我的后台动态路由实现方式，modules 里是一级路由的定义