React 改變底部樣式

import React, { PureComponent } from 'react';
import './styles.less';
import { renderRoutes } from 'react-router-config'
import { Link, } from 'react-router-dom'
import cs from 'classnames'

export default class extends PureComponent {
    state = {
        data: [
            { id: 0, text: '首頁', icon: 'icon-shouye', path: '/home' },
            { id: 1, text: '購物車', icon: 'icon-gouwuchekong', path: '/home/shopping' },
            { id: 2, text: '我的', icon: 'icon-wode', path: '/home/mine' },
        ]
    }
    render() {
        const { data } = this.state
        return (
            <div className='home'>
                {/* 主頁： 上是 路由  下是  底部 標籤 */}
                <div className='home_top'>
                    {renderRoutes(this.props.route.router)}
                </div>
                <div className='home_bot'>
                    {
                        data.map((v, k) => {
                            return (
                                <Link 
                                	to={v.path} 
                                	key={k} 
                                	className={cs({'aStyle': v.path === this.props.history.location.pathname})}
                                >
                                    <dl>
                                        <dt className={`iconfont ${v.icon}`}></dt>
                                        <dd>{v.text}</dd>
                                    </dl>
                                </Link>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}