//import React from 'react'; 引入类
//import { Component } from 'react';  引入对象
import React, { Component } from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';//引入布局和子组件
import BasicLayout from '../layout/layout';
import Analysis from '../coms/Analysis';
import Monitor from '../coms/Monitor';
import Workplace from '../coms/Workplace';//分配路由
const BasicRoute = () => (<HashRouter><Switch><Route exact path="/" component={BasicLayout}/><Route exact path="/Analysis" component={Analysis}/><Route  path="/Monitor" component={Monitor}/><Route  path="/Workplace" component={Workplace}/></Switch></HashRouter>
);export default BasicRoute;

import React, { Component } from 'react';
import  {Layout ,Menu,Icon} from 'antd';
import { Router, Route, Link,HashRouter } from 'react-router-dom'
import 'antd/dist/antd.min.css'
import BasicRoute from '../routes/router';const { Header, Footer, Sider, Content } = Layout;export default class BasicLayout extends Component {render() {return (<Layout><Sider width={256} style={{ minHeight: '100vh', color: 'white' }}><Menu theme="dark" mode="inline" >{/*定义了项目的link，会按照路由走*/}<Menu.Item><Link to="/Analysis">Item1</Link></Menu.Item></Menu></Sider><Layout ><Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360 }}>{/*Analysis.js文件引用了BasicLayout，并把自己的全部子节点(子组件)传过来*/}{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer></Layout></Layout>
    )}
}

import React from 'react';
import BasicLayout from '../layout/layout';
export default () => {//用BasicLayout标签包裹，内容传到layout.js的this.props.children部分return (<BasicLayout><h1>Analysis Page</h1></BasicLayout>)
}