patchClientRoutes更新完路由之后，如何触发侧边栏路由显示的更新呢？目前侧边栏的显示实现如下，如何调整：import {
ReactNode, useEffect, useMemo } from "
react";
import { history } from "@/utils/umi";
import classNames from "classnames";
import { Menu } from "@sigma-wg/ui";
import { useMenuSelectedKey } from "@/hooks/use-menu-selected-key";
import { useSiteShortName } from "@/store/host-url";
import { useAdminRoutes } from "@/store/admin-routes";
import { getItemIcon } from "./helper";
import { useCurrentRoute, getCurrentApp } from "../hooks";
import styles from "./index.module.css";
interface SiderProps {
collapsed: boolean;
}
const LabelByCollapsed = ({
children,
collapsed,
}: {
children:
ReactNode;
collapsed: boolean;
}) => {
return !collapsed ? children : <></>;
};
const Sider = ({ collapsed }: SiderProps) => {
const selectedKey = useMenuSelectedKey();
const appName = getCurrentApp(selectedKey);
const currentRoute = useCurrentRoute(appName);
const childAdminRoute = useAdminRoutes();
// 去除重定向的路由
const currentRoutes = useMemo(() => {
console.log("childAdminRoute",childAdminRoute);
const parentRoutes = currentRoute?.children?.filter((item) => item.path !== "/" && !item.path?.includes(&
#39;*&
#39;)) || [];
const parentRoutePaths = parentRoutes.map((route) => route.path);
const childAdminRoutes = childAdminRoute?.filter((item) => parentRoutePaths.includes(item.path));
return [...parentRoutes,...childAdminRoutes]
}, [currentRoute,childAdminRoute]);
const site_short_name = useSiteShortName();
const items = useMemo(() => {
console.log("currentRoutes",currentRoutes);
const labelTitle = (
<div className={classNames(styles.label, styles.top)}>
<LabelByCollapsed collapsed={collapsed}>
<div className={styles.title}>{site_short_name || "智算"}</div>
</LabelByCollapsed>
</div>
);
const subMenus = currentRoutes.map((g, index) => ({
label: (
<LabelByCollapsed collapsed={collapsed}>{g.label}</LabelByCollapsed>
),
key: g.path || `${index}_${g.label}`,
icon: getItemIcon(g.path),
type: g.children && "group", // 有子菜单的 才有分组
children: g.children
// @ts-ignore
?.filter((child) => !child.hidden)
.map((m) => ({
key: m.path as string,
label: m.label,
icon: getItemIcon(m.path),
})),
}));
return [
{
type: "group",
label: labelTitle,
key: "title",
children: subMenus,
},
];
}, [collapsed, site_short_name,currentRoutes]);
// 找到当前路由页面有tab页的 eg: [{path:"/virtual-machine",routes:[{path:"/virtual-machine/virtual-machine-instance",...},{path:"/virtual-machine/virtual-machine-snapshot",...}]}]
const parentTabRoutes = useMemo(() => {
const hasTabRoutes: { path?: string; routes: Record<string, any>[] }[] = [];
currentRoutes.forEach((parent) => {
parent?.children?.forEach((child) => {
// @ts-ignore
if (child?.routes?.find((grandchild) => !!grandchild.hidden)) {
hasTabRoutes.push({
path: child.path,
// @ts-ignore
routes: child.routes?.filter((grandchild) => !!grandchild.hidden),
});
}
});
});
return hasTabRoutes || [];
}, [currentRoutes]);
const handleMenuItemClick = (e: { key: string }) => {
const parentRoutesPaths = parentTabRoutes.map((item) => item.path);
// 1）路由对应页面有tab页的，则跳转到第一个tab页的
地址
if (parentRoutesPaths.includes(e?.key)) {
const findParentRoute = parentTabRoutes.find(
(item) => item.path === e?.key,
);
const firstTabPath = findParentRoute?.routes?.[0]?.path;
if (firstTabPath) {
history.push(firstTabPath);
}
} else {
// 2）路由对应页面没有tab页的，直接路由跳转
history.push(e?.key);
}
};
return (
<Menu
items={items}
selectedKeys={[selectedKey]}
onClick={handleMenuItemClick}
className={styles.menu}
/>
);
};
export default Sider;
本文介绍如何在项目中配置BrowserHistory替代hashRouter，通过具体步骤实现更好的SEO效果，并提升用户体验。
扫一扫
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
