UMI學習-5 路由及使用Layout佈局

前言：學習目標實現點擊登陸按鈕，直接進入後臺佈局頁面，相似下面antd官網文檔展現效果

 

 

 一、最開始想的很簡單，增長一個頁面，修改一個路由便可，實際操做中掉了幾回坑，花了很長時間

 首先修改路由以下，注意：若是寫後面，好比

 的話會報

 要放前面以下

 二、修改BasicLayout內容以下

import { Layout, Menu, Icon } from 'antd';
import React from 'react';
import ReactDOM from 'react-dom';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span>nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span>nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span>nav 3</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              background: '#fff',
              minHeight: 800,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default SiderDemo;

注意，最後一行不能寫爲

ReactDOM.render(<SiderDemo />, mountNode);

或者

export default <SiderDemo/>

上面編譯報錯，下面運行報錯：

react-native Element type is invalid: expected a string (for built-in components).....

 

 

三、爲了方便測試運行效果，修改代碼以下

 

四、運行界面以下

4.1登陸頁面

 

 4.2跳轉後進入mainfrm頁面

 五、目前項目結構（login目錄暫未使用）