浏览器回退拦截,拦截/处理React-router中的浏览器后退按钮？

I'm using Material-ui's Tabs, which are controlled and I'm using them for (React-router) Links like this:

}/>

} />

} />

If I'm currenlty visting dashboard/data and I click browser's back button

I go (for example) to dashboard/users but the highlighted Tab still stays on dashboard/data (value=2)

I can change by setting state, but I don't know how to handle the event when the browser's back button is pressed?

I've found this:

window.onpopstate = this.onBackButtonEvent;

but this is called each time state is changed (not only on back button event)

解决方案

here is how I ended up doing it:

componentDidMount() {

this._isMounted = true;

window.onpopstate = ()=> {

if(this._isMounted) {

const { hash } = location;

if(hash.indexOf('home')>-1 && this.state.value!==0)

this.setState({value: 0})

if(hash.indexOf('users')>-1 && this.state.value!==1)

this.setState({value: 1})

if(hash.indexOf('data')>-1 && this.state.value!==2)

this.setState({value: 2})

}

}

}

thanks everybody for helping lol