nav icon

src/common/NavBar/index.js

 import React from 'react';
-import { NavLink } from 'react-router-dom'
+import { NavLink, withRouter } from 'react-router-dom'
 import './index.scss';
 
 const navLinkConfig = [
@@ -7,29 +7,33 @@ const navLinkConfig = [
         to: '/',
         exact: true,
         icon: 'iconshouye-xianxing',
+        activeIcon: 'iconshouye1',
         text: '首页'
     },
     {
         to: '/classify',
         exact: false,
         icon: 'iconfenlei-xianxing',
+        activeIcon: 'iconfenlei-chunse',
         text: '分类'
     },
     {
         to: '/study',
         exact: false,
         icon: 'iconxuexi-xianxing',
+        activeIcon: 'iconxuexi-chunse',
         text: '学习'
     },
     {
         to: '/my',
         exact: false,
         icon: 'iconwode-xianxing',
+        activeIcon: 'iconwode-chunse',
         text: '我的'
     }
 ]
 
-const NavBar = React.memo(() => {
+const NavBar = React.memo(({location}) => {
     return (
         <div className="nav-bar">
             {
@@ -42,7 +46,7 @@ const NavBar = React.memo(() => {
                             key={icon}
                             {...rest}
                         >
-                            <i className={`iconfont ${icon}`}/>
+                            <i className={`iconfont ${location.pathname.startsWith(item.to) ? item.activeIcon : item.icon}`}/>
                             <span>{text}</span>
                         </NavLink>
                     )
@@ -52,4 +56,4 @@ const NavBar = React.memo(() => {
     )
 })
 
-export default NavBar
\ No newline at end of file
+export default withRouter(NavBar)
\ No newline at end of file