react配合antd组件实现的管理系统demo

|-src  			//开发
|----assets  		//css，img资源
|----unit.js  		//公用方法
|----routers            //路由配置
|----containers         //业务逻辑页面
|----component          //通用组件

注意import后会返回一个promise对象。
import('/components/chart').then(mud => {
dosomething(mod)
});

class Bundle extends Component {
  constructor(props) {
      super(props);
      this.state = {
          mod: null
      };
  }
  unmount = false
  componentDidMount = () => {
    // 加载组件时，打开全局loading
    this.props.dispatch(loading(true))
    this.load(this.props)
  }
  componentWillUnmount = () => {
    this.unmount = true
  }
  
  componentWillReceiveProps(nextProps) {
      if (nextProps.load !== this.props.load) {
          this.load(nextProps)
      }
  }
  load(props) {
      if (this.state.mod) {
          return true
      }
      //注意这里，使用Promise对象; mod.default导出默认
      props.load().then((mod) => {
          if (this.unmount) {
              // 离开组件时，不异步执行setState
              this.props.dispatch(loading(false))
              return false
          }
          this.setState({
              mod: mod.default ? mod.default : mod
          }, _ => {
            // 组件加载完毕，关闭loading
            this.props.dispatch(loading(false))
          });
      });
  }

  render() {
      return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

  <Bundle load={() => import('路径')}>
    {Comp => {
      return Comp ? <Comp /> : <div>加载中...</div>
    }}
  </Bundle>

const routers = [
  {
    menuName: '主页',
    menuIco: 'home',
    component: 'home/home.js', // 主页
    path: '/admin/home' // 主页
  },
  {
    menuName: '用户',
    menuIco: 'user',
    children: [
      {
        menuName: '用户列表',
        component: 'user/list.js', // 主页
        path: '/admin/user/list' // 主页
      }
    ]
  },
  {
    menuName: '多级菜单',
    menuIco: 'setting',
    children: [
      {
        menuName: '多级菜单2',
        children: [
          {
            menuName: '菜单',
            component: 'user/list.js', // 主页
            path: '/admin/user/list3' // 主页
          }
        ]
      }
    ]
  },
  {
    menuName: '关于我',
    menuIco: 'smile-o',
    component: 'about/about.js', // 主页
    path: '/admin/about' // 主页
  }
]

<Admin>
    <Content { ...this.props } breadcrumb={this.state.breadcrumb}>
        {this.props.children}
    </Content>
</Admin>

// Content组件内部
render() {
    return (
        <div> 
            {this.props.children}
        </div>
    )
}
// 本demo实现,详见src/routers/router.js
<Route
  path="/admin"
  render={item => (
    <Admin {...item} { ...this.props }>
      {initRouters.map(el => this.deepItem(el, { ...this.props, ...item}))}
    </Admin>
  )}
/>

import otherReducers from './otherReducers'
const App =  combineReducers({
    rootReducers,
    ...otherReducers // 其他需要增加的reducers
})

const newWithRouter = withRouter(props => {
    // ....
})

return <Redirect  to="/login" />

return <Redirect  to={其他} />

homepage:'.'