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

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效果