react-router 页面刷新，但是菜单栏的active效果重置的问题

Question

1.页面刷新，但是active效果会重置回第一个

2.下面是代码

const menu = [

{menuUrl: 'console', menuName: '控制台'},
{menuUrl: 'loanBefore', menuName: '进件管理'},
{menuUrl: 'loanLater', menuName: '贷后'},
{menuUrl: 'customer', menuName: '客户'},
{menuUrl: 'operationManager', menuName: '运营管理'},
{menuUrl: 'application', menuName: '应用'},
{menuUrl: 'set', menuName: '设置'},
{menuUrl: 'detail', menuName: '数据'}

]

export default class Content extends Component {

constructor(props) {
    super(props)
    this.state = {
        bgColor: 0
    }
    //this.changeBgColor = this.changeBgColor.bind(this);
}

changeBgColor(index) {
    this.setState({
        bgColor: index
    })
}

render() {
    var {url} = this.props.match;
    return (
        <div>
            <div className="" style={{overflow:'hidden'}}>
                {/*<!--此处作为更新视图容器-->*/}
                <div className="nav-bg">
                    <div className="nav-left floatLeft">
                        <div className="nav-left-icon floatLeft"></div>
                        <div className="nav-left-title floatLeft">凯盛金融</div>
                        <div className="nav-left-bor floatLeft"></div>
                        <div className="nav-left-name floatLeft">金融管理系统</div>
                    </div>
                    <div className="nav-center floatLeft">
                        <ul id="nav-parent">
                            {
                                menu.map((item, index) =>
                                    (<li key={index} className={`index ${this.state.bgColor === index ? "actives" : ""}`}
                                         onClick={this.changeBgColor.bind(this, index)}>
                                        <Link className="js-menu-item"
                                              to={`${url}/${item.menuUrl}`}>{item.menuName}</Link>
                                    </li>)
                                )
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <Switch>
                <Route path={`${url}/console`} component={Console}/>
                <Route path={`${url}/loanBefore`} component={LoanBefore}/>
                <Route path="/console" component={Console}/>
                <Route path="/console" component={Console}/>
                <Route path="/console" component={Console}/>
                <Route path="/console" component={Console}/>

            </Switch>
        </div>
    )
}

3.刷新后active效果如何不重置，想到了在url里加个参数，重新渲染的时候拿个这个参数去给对应的tab active效果

Answer 1

页面加载前 获取当前路由然后用路由去比较 渲染的时候自然就是选择状态

<li key={index} className={`index ${this.state.bgColor === index ? "actives" : ""}`
这里你应该用当前路由路由去比较而不是index

----补充

<NavLink>使用方法链接描述

Answer 2

通过state保存的数据，是保存在内存中，页面刷新，自然会清除掉你setState过的值，使用url加参数可以，另一种方式就是使用sessionStorage或者localStorage保存一下当前active的菜单。