bug处理--antdesign中umi升级后无法加载子页面

bug处理--antdesign中umi升级后无法加载子页面

history

const Admin: React.FC =(props)=> {
	const { children }=props;
	return (
		<PageHeaderWrapper>
        	{children}
		</PageHeaderWrapper>
	);
};

now

升级到 Umi4 后,之前的一些组件不能用了,获取不到 propsprops 是空对象。

Umi4 在代码层做了修改,将 react-router@5 升级到 react-router@6,所以路由相关的一些 api 存在着使用上的差异。

props 默认为空对象,以下属性都不能直接从 props 中取出:

img

改为使用Outlet标签

changes

Admin.tsx

import { Outlet } from 'umi';


const Admin: React.FC =(props)=> {
	const { children }=props;
	return (
		<PageContainer>
        	<Outlet>
        	</Outlet>
		</PageContainer>
	);
};

routes.ts

{
    path: '/admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',

    routes: [
      {
        path: '/admin/user-manage',
        name: '用户管理',
        icon: 'smile',
        component: './Admin/UserManage',

      },
    ],
  },

效果

image

posted @   vast_joy  阅读(41)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示