AntDesign(React)学习-5 路由及使用Layout布局

前言：学习目标实现点击登录按钮，直接进入后台布局页面，类似下面antd官网文档展示效果

ant.design访问

https://ant-design.gitee.io/components/menu-cn/

速度比较快

 1、最开始想的很简单，增加一个页面，修改一个路由即可，实际操作中掉了几次坑，花了很长时间

 首先修改路由如下，注意：如果写后面，比如

 的话会报

 要放前面如下

或者增加exact

 注意，嵌套路由父路由不能使用exact:true

 这种无法访问

 2、修改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 (
      
        null} collapsible collapsed={this.state.collapsed}>
          

          
            
              
              nav 1
            
            
              
              nav 2
            
            
              
              nav 3
            
          
        
        
          

            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              background: '#fff',
              minHeight: 800,
            }}
          >
            Content
          
        
      
    );
  }
}
export default SiderDemo;

注意，最后一行不能写为

ReactDOM.render(/>, mountNode);

或者

export default

上面编译报错，下面运行报错：

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

3、为了方便测试运行效果，修改代码如下

4、运行界面如下

4.1登录页面

 4.2跳转后进入mainfrm页面

 5、目前项目结构

6、下面是实现动态路由的一篇文章
https://blog.csdn.net/duola8789/article/details/90169410