一、效果图

二、文件的图片、位置、作用

三、umijs的约定路由

四、代码

1. layouts文件夹下的index.jsx

import React, { Component } from "react";
import CommonHeader  from  './CommonHeader'
import styles from './index.less'export default function(props) {return (<div className={styles.layout}><CommonHeader />{ props.children }</div>);
}

2. layouts文件夹下的CommonHeader.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
import styles from './CommonHeader.less'
class commonHeader extends  Component{//      首页//operate   智慧运营//station  智慧场站//service  智慧服务//decision   智慧决策constructor(){super();this.state={ currentIndex : 0};}check_tittle_index(index){return index===this.state.currentIndex ? `${styles.tabItem}  ${styles.tabItem_active}` : `${styles.tabItem}`;}render() {return (<div className={styles.header}><div className={styles.header_content}><div className={styles.header_left}><Link to=""> <div   onClick={() => { this.setState({currentIndex : 0})}}     className={ this.check_tittle_index(0) }>首页</div> </Link><Link to="operate"> <div  onClick={() => { this.setState({currentIndex : 1})}}  className={ this.check_tittle_index(1) } >智慧运营</div>  </Link><Link to="station"> <div  onClick={() => { this.setState({currentIndex : 2})}}   className={ this.check_tittle_index(2) }>智慧场站</div> </Link></div><div  className={styles.tabTitle}>无锡华润燃气数据可视化平台</div><div className={styles.header_right}><Link to="service"> <div   onClick={() => { this.setState({currentIndex : 3})}}  className={ this.check_tittle_index(3) }>智慧服务</div> </Link><Link to="decision"> <div  onClick={() => { this.setState({currentIndex : 4})}}  className={ this.check_tittle_index(4) }>智慧决策</div> </Link></div> </div></div>)}}export default commonHeader

3. pages文件夹下的index.jsx

//index  首页import React, { Component } from "react";import styles from './index.less'class Index extends  Component{render() {return (<div className={styles.title}>首页</div>)}}   export default Index