1. The page refreshes, but the active effect resets back to the first

2. Here is the code

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. After refreshing, how not to reset the active effect? think of adding a parameter to the url, and then take this parameter to give the corresponding tab active effect