UMI學習-8 antd Menu點擊 切換框架頁內容頁面

本節實現一個點擊左側menu在右側content切換頁面效果，原始代碼請從UMI學習-6開始看

一、在pages下添加兩個組件，User,UserRole

import React from 'react';
class User extends React.Component { 
  render() {
    return (
      <div>用戶管理</div>
    );
  }
}
export default User;

import React from 'react';
class UserRole extends React.Component { 
  render() {
    return (
      <div>角色管理</div>
    );
  }
}
export default UserRole;

二、修改umirc.ts routes部分以下

const config: IConfig =  {
  treeShaking: true,
  routes: [
    {
       path: '/mainfrm',
       component: '../layouts/BasicLayout',
       routes: [
        { path: '/mainfrm', component: '../pages/User' },
        { path: '/mainfrm/user', component: '../pages/User' },
        { path: '/mainfrm/userrole', component: '../pages/UserRole' },
      ]
    },
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        { path: '/', component: '../pages/index' }
      ]
    }
  ],

三、修改leftmenutree中state代碼爲

class LeftMenuTree extends React.Component {
  state={list:[{"id":0,"title":"首頁","url":"/","children":[]},{"id":1,"title":"權限配置","parentid":0,"children":[{"id":2,"title":"用戶管理","url":"/mainfrm/user","parentid":1,"children":[]},{"id":3,"title":"角色管理","url":"/mainfrm/userrole","parentid":1,"children":[]}]}]};

四、運行正常