修改底部tabbar

src/HOCs/WithTab/index.js

 import React, { Component } from 'react'
-import Menu from '@/menu'
+import NavBar from '@/common/NavBar'
 
 export default function WithTab(WrappedComponent) {
     return class extends Component {
         render() {
-            return(
+            return (
                 <>
                     <WrappedComponent {...this.props}/>
-                    <Menu/>
+                    <NavBar/>
                 </>
             )
         }

src/common/Nav/NavLink/index.js

-import React, { Component } from 'react'
-import { NavLink } from 'react-router-dom';
-import './index.scss'
-
-export default class NavLinks extends Component {
-    render() {
-        const { pathUrl, active, icoName, linkName, ...rest } = this.props;
-        return (
-            <NavLink
-                {...rest}
-                to={pathUrl}
-                activeClassName={active}
-                className={"root-item"}
-            >
-                <i className={icoName} />
-                <span className={"text"}>{linkName}</span>
-            </NavLink>
-        )
-    }
-}
\ No newline at end of file

src/common/Nav/index.js

-import React, { Component } from 'react';
-import NavLink from './NavLink';
-import './index.scss';
-
-export default class Nav extends Component {
-    render() {
-        return (
-            <div>
-                <div style={{ height: '50px' }}></div>
-                <div className="root">
-                    <NavLink
-                        pathUrl="/"
-                        exact
-                        icoName="iconfont iconshouye"
-                        active={"navOne"}
-                        linkName="首页"
-                    />
-                    <NavLink
-                        pathUrl="/classify"
-                        icoName="iconfont iconiconfront-16"
-                        active={"navTwo"}
-                        linkName="分类"
-                    />
-                    <NavLink
-                        pathUrl="/study"
-                        icoName="iconfont iconxuexi"
-                        active={"navThree"}
-                        linkName="学习"
-                    />
-                    <NavLink
-                        pathUrl="/my"
-                        icoName="iconfont iconhome"
-                        active={"navFour"}
-                        linkName="我的"
-                    />
-                </div>
-            </div>
-        )
-    }
-}
\ No newline at end of file

src/common/Nav/index.scss

-.root {
-  height: 50px;
-  position: fixed;
-  z-index: 50;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  display: flex;
-  background: #fff;
-  border-top: 1px solid #ddd;
-}
-
-.navOne, .navTwo, .navThree, .navFour, .navFive {
-  color: #09f;
-  &:hover, &:active {
-    color: #09f;
-  }
-}
-.navTwo{
-  color: #09f;
-  &:hover, &:active {
-    color: #09f;
-  }
-  .iconiconfront-16::before{
-      content: "\E695";
-  }
-}
-
-.iconfont{
-  font-size: 24px;
-  margin-bottom: 4px;
-}
\ No newline at end of file

src/common/NavBar/index.js

+import React from 'react';
+import { NavLink } from 'react-router-dom'
+import './index.scss';
+
+const navLinkConfig = [
+    {
+        to: '/',
+        exact: true,
+        icon: 'iconshouye',
+        text: '首页'
+    },
+    {
+        to: '/classify',
+        exact: false,
+        icon: 'iconiconfront-16',
+        text: '分类'
+    },
+    {
+        to: '/study',
+        exact: false,
+        icon: 'iconxuexi',
+        text: '学习'
+    },
+    {
+        to: '/my',
+        exact: false,
+        icon: 'iconhome',
+        text: '我的'
+    }
+]
+
+const NavBar = React.memo(() => {
+    return (
+        <div className="nav-bar">
+            {
+                navLinkConfig.map(item => {
+                    let {icon, text, ...rest} = item
+                    return (
+                        <NavLink
+                            activeClassName={'active'}
+                            className={'nav-item'}
+                            key={icon}
+                            {...rest}
+                        >
+                            <i className={`iconfont ${icon}`}/>
+                            <span>{text}</span>
+                        </NavLink>
+                    )
+                })
+            }
+        </div>
+    )
+})
+
+export default NavBar
\ No newline at end of file

src/common/Nav/NavLink/index.scss → src/common/NavBar/index.scss

-.root-item {
+.nav-bar {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    height: 50px;
+    bottom: 0;
+    left: 0;
+    z-index: 50;
+    background: $white;
+    border-top: 1px solid #ddd;
+
+    .iconfont {
+        font-size: $font_24;
+        margin-bottom: 4px;
+    }
+
+    .nav-item {
         flex: auto;
         display: flex;
         flex-direction: column;
@@ -7,18 +23,13 @@
         align-items: center;
         line-height: 1;
         color: #666;
-  &:hover {
+
+        &.active {
             color: $active;
         }
+    }
 }
 
-.ico {
-  font-size: 0.42rem;
-  display: block;
-  margin-bottom: 0.1rem;
-}
 
-.text {
-  display: block;
-  line-height: 1;
-}
\ No newline at end of file
+
+

src/common/index.js

-// 底部路由
-export { default as Nav } from './Nav'
 export { default as VList } from './VList'
 export { default as Course } from './Course'  //  课程状态（试听 正在直播）+封面+标题+ 详情
 export { default as Tag } from './CategoryTag'

src/menu.js

-import React from 'react';
-import { Nav } from './common';
-
-class menu extends React.Component {
-
-    render(match) {
-        return (
-            <div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0,zIndex: '999' }}>
-                <Nav />
-            </div>
-        )
-    }
-
-}
-
-
-export default menu;