修改 app.tsx 文件

• 修改 getInitialState 方法

export async function getInitialState(): Promise<{...menuData?: MenuDataItem[] | undefined;fetchMenuList?: Promise<MenuDataItem[] | undefined>;
}> {...const fetchMenuList = async () => {const menuList = await fetchMenus();return menuList;};const menuData = await fetchMenuList();	return {...menuData,};
}

• 修改 layout

export const layout: RunTimeLayoutConfig = ({ initialState }) => {...return {...menuDataRender: () => {return initialState?.menuData;},}
}

menuData 结构

[{path: '/item',name: '一级菜单',children: [{path: '/item/detail',name: '二级菜单'，}],}
]

menuData 中只需要 path 和 name，对应的 components 需要在 routes 中配置。

路由文件 routes.ts

export default [{path: '/item',routes: [{path: '/item/detail',component: './detail',}]},
]

如果在 routes 中配置的菜单在 menuData 中没有，可以修改 app.tsx 文件的 onPageChange 方法，重定向到 404。

onPageChange: () => {const { location } = umi.history;if (initialState?.menuData?.length) {// 如果访问页面不在menuData中，重定向到404const isInMenu = checkPathExists();if (!isInMenu) history.push("/404");}
},