bug處理--antdesign中umi升級後無法載入子頁面

bug處理--antdesign中umi升級後無法載入子頁面

history

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

now

升級到 Umi4 後，之前的一些元件不能用了，獲取不到 props ，props 是空物件。

Umi4 在程式碼層做了修改，將 react-router@5 升級到 react-router@6，所以路由相關的一些 api 存在著使用上的差異。

props 預設為空物件，以下屬性都不能直接從 props 中取出：

改為使用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',

      },
    ],
  },

效果