在React-router中拦截/处理浏览器的后退按钮?

我正在使用Material-ui的选项卡,这些选项卡是受控的,并且将它们用于(React-router)链接,如下所示:

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>

<Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />

<Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

如果我正在访问仪表板/数据并且单击浏览器的后退按钮,则可以转到仪表板/用户(例如),但突出显示的选项卡仍停留在仪表板/数据上(值= 2)

我可以通过设置状态来更改,但是当按下浏览器的后退按钮时,我不知道如何处理该事件?

我发现了这一点:

window.onpopstate = this.onBackButtonEvent;

但这在每次状态更改时都会调用(不仅在返回按钮事件发生时)

回答:

这是我最终做的事情:

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})

}

}

}

谢谢大家的帮助

以上是 在React-router中拦截/处理浏览器的后退按钮? 的全部内容, 来源链接: utcz.com/qa/433433.html

回到顶部