index.js 1.58 KB
Newer Older
zhanghaozhe committed
1
import React from 'react';
zhanghaozhe committed
2
import { NavLink, withRouter } from 'react-router-dom'
zhanghaozhe committed
3
import './index.scss'
zhanghaozhe committed
4 5 6 7 8

const navLinkConfig = [
    {
        to: '/',
        exact: true,
xuzhenghua committed
9
        icon: 'iconshouye-xianxing',
zhanghaozhe committed
10
        activeIcon: 'iconshouye1',
zhanghaozhe committed
11 12 13 14 15
        text: '首页'
    },
    {
        to: '/classify',
        exact: false,
xuzhenghua committed
16
        icon: 'iconfenlei-xianxing',
zhanghaozhe committed
17
        activeIcon: 'iconfenlei-chunse',
zhanghaozhe committed
18 19 20 21 22
        text: '分类'
    },
    {
        to: '/study',
        exact: false,
xuzhenghua committed
23
        icon: 'iconxuexi-xianxing',
zhanghaozhe committed
24
        activeIcon: 'iconxuexi-chunse',
zhanghaozhe committed
25 26 27 28 29
        text: '学习'
    },
    {
        to: '/my',
        exact: false,
xuzhenghua committed
30
        icon: 'iconwode-xianxing',
zhanghaozhe committed
31
        activeIcon: 'iconwode-chunse',
zhanghaozhe committed
32 33 34 35
        text: '我的'
    }
]

zhanghaozhe committed
36
const NavBar = React.memo(({location}) => {
zhanghaozhe committed
37 38 39 40
    return (
        <div className="nav-bar">
            {
                navLinkConfig.map(item => {
zhanghaozhe committed
41
                    let {icon, text, activeIcon, ...rest} = item
zhanghaozhe committed
42 43 44 45 46 47 48
                    return (
                        <NavLink
                            activeClassName={'active'}
                            className={'nav-item'}
                            key={icon}
                            {...rest}
                        >
zhanghaozhe committed
49
                            <i className={`iconfont ${item.to.length > 1 ? location.pathname.startsWith(item.to) ? activeIcon : icon : location.pathname === item.to ? activeIcon : icon}`}/>
zhanghaozhe committed
50 51 52 53 54 55 56 57 58
                            <span>{text}</span>
                        </NavLink>
                    )
                })
            }
        </div>
    )
})

zhanghaozhe committed
59
export default withRouter(NavBar)