react +andt+umi.js 页面导航nav部分

图片.png

效果图如上

import styles from './index.css';
import React from 'react';
import { Menu } from 'antd';
import router from 'umi/router';

class Nav extends React.Component {
  state = {
    current: 'goHomePage',
  };
  // componentDidMount() {
  //   const pathName = this.props.pathName;
  //   if (pathName !== '') {
  //     this.setState({
  //       current: pathName.pathname,
  //     });
  //   }
  // }

  render() {
    return (
      // 头部及导航栏
      

        

          
          

            
              
                首页
              
              
                产品中心
              
              
                项目案例
              
              
                动态资讯
              
              
                商务合作
              
              
                关于我们
              
            
          
        
        

      
    );
  }
  //导航栏点击事件
  handleClick = e => {
    this.setState({
      current: e.key,
    });
    if (e.key === 'goHomePage') {
      //去首页
      router.push('/homePage');
    } else if (e.key === 'goProductPage') {
      //去产品页
      router.push('/productPage');
    } else if (e.key === 'goProjectPage') {
      // 去项目案例页
      router.push('/projectPage');
    } else if (e.key === 'goCompanyDynamicPage') {
      //去动态资讯页
      router.push('/CompanyDynamicPage');
    } else if (e.key === 'CommercialCooperation') {
      // 去商务合作
      router.push('/commercialCooperation');
    } else if (e.key === 'goAboutUs') {
      // 去关于我们页
      router.push('/aboutUsPage');
    }
  };
}

export default Nav;

样式：

/* 顶部/头部 */
header {
  background-color: #ffffff;
  display: block;
  zoom: 1;
  border-bottom: 6px solid #eaeaea !important;
  width: 100%;
  min-width: 1200px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

header::after {
  content: '';
  display: block;
  clear: both;
}

.sanxLogo {
  float: left;
  margin-left: 15%;
  display: block;
  width: 230px;
  height: auto;
  cursor: pointer;
  padding-top: 11px;
}

.navList {
  float: left;
  margin-left: 5%;
  display: block;
}

.navItem {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-size: 16px;
}

body .navList :global(.ant-menu-horizontal) {
  line-height: 80px;
  white-space: nowrap;
  border: 0;
  /* border-bottom: 1px solid #e8e8e8; */
  box-shadow: none;
}

body .navList :global(.ant-menu) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}