From fc8197b4d1da71e983336aa50b2a67b79198e3a9 Mon Sep 17 00:00:00 2001
From: zhanghaozhe <zhanghaozhe@julyedu.cn>
Date: Thu, 22 Aug 2019 11:41:41 +0800
Subject: [PATCH] nav icon
---
src/common/NavBar/index.js | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/common/NavBar/index.js b/src/common/NavBar/index.js
index 96f635b..82be908 100644
--- a/src/common/NavBar/index.js
+++ b/src/common/NavBar/index.js
@@ -1,5 +1,5 @@
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
--
libgit2 0.26.0