frontend/src/App.js

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import  "./App.css"
import "./assets/comm.css"

import { Avatar, Badge } from 'zent';
import extension from './pages/extension/main/main';
import overview from './pages/overview/main/main';
export default class App extends Component {
  state = {
   pathname:'',
  };
  componentWillMount(){
      const pathname=window.location.href.lastIndexOf('\/');
      const pathnamestr=window.location.href.substr(pathname);
      this.setState({pathname:`${pathnamestr}`});
  }

  render() {
    return (
        <Router>
          <div className="start dflexajc">           
              <div className="header dflexaj boxs">
              {/* logo */}
              <div className="log dflexaj">
              <img src="https://qzonestyle.gdtimg.com/gdt_ui_proj/dist/phoenix/images/ams-logo.svg?max_age=31536000" alt=""/>
              <span>营销系统管理平台</span>
              </div>
               {/* 顶部导航 */}
                 <div className="nav dflexa"> 
                 <Link to="/overview"  className={this.state.pathname=='/overview'?'active':''} onClick={()=>this.setState({pathname:'/overview'})}>概览</Link>
                 <Link to="/extension"  className={this.state.pathname=='/extension'?'active':''} onClick={()=>this.setState({pathname:'/extension'})}>推广</Link>
                 </div>
                 {/* 用户头像信息 */}
                 <div className="userImg dflexa">
                 <Link href="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link>
                 <Avatar style={{ backgroundColor: '#296bef' }}>Red</Avatar>
                 </div>
              </div>   
              <aside className="mainbody" >
                <div>
                <Route exact path="/extension" component={extension} />  
                <Route exact path="/overview" component={overview} />  
                </div>
               
                </aside> 
          </div>
      </Router>
    );
  }
}