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

我使用的材料的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"/>} />

如果我currenlty visting仪表板/数据和我点击浏览器后退按钮我去（例如）仪表板/用户，但突出显示的选项卡仍然停留在仪表板/数据（值= 2）

我可以通过设置状态进行更改，但我不知道如何处理事件当浏览器的后退按钮被按下？

我发现这一点：

window.onpopstate = this.onBackButtonEvent;

，但是这就是所谓的每个状态改变（不仅在返回按钮事件）

来源

2016-09-06 high incompetance

这里是我最后只是时间：

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

感谢大家帮助大声笑

来源

2016-09-07 07:04:51

哈哈太棒了！谢谢，无论如何帮助我！ –

这是一个有点老的问题，你可能已经读过你得到了你的答案，但对于像我这样需要这个的人，我会离开这个答案。

使用反应路由器所做的工作简单，例如：

import { browserHistory } from 'react-router'; 

componentDidMount() { 
    super.componentDidMount(); 

    this.onScrollNearBottom(this.scrollToLoad); 

    this.backListener = browserHistory.listen(location => { 
     if (location.action === "POP") { 
     // Do your stuff 
     } 
    }); 
    } 

componentWillUnmount() { 
    super.componentWillUnmount(); 
    // Unbind listener 
    this.backListener(); 
}

来源

2017-07-31 01:40:28

不适用于我。使用[email protected]，location.action始终是PUSH，即使您在处理后退按钮操作时单击浏览器后退按钮 – loopmode

@loopmode，为您使用类似'browserHistory.goBack（）'''' ?? –

我发现在其他地方，一个同事正在手动干预历史，沿线 if（nextLocation.action ==='POP'&& getStepIndex（nextLocation.pathname）=== 0）{0} {0} {0} {0} browserHistory.push（ {pathname：'$ {getPathForIndex（0）}'}）; 返回false; } so ...'如果POP然后PUSH'为了使前进按钮不可用（这将前进没有提交表格）因此..您的答案仍然正确 - 用户错误在我身边:) – loopmode

的阵营路由器API的版本3.x有a set of utilities，您可以使用与事件寄存器之前揭露了“后退”按钮事件浏览器的历史。您必须先将您的组件包装在withRouter() higher-order component中。然后，您可以使用setRouteLeaveHook()函数，该函数接受具有有效path属性和回调函数的任何route对象。

import {Component} from 'react'; 
import {withRouter} from 'react-router'; 

class Foo extends Component { 
    componentDidMount() { 
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave); 
    } 

    routerWillLeave(nextState) { // return false to block navigation, true to allow 
    if (nextState.action === 'POP') { 
     // handle "Back" button clicks here 
    } 
    } 
} 

export default withRouter(Foo);

来源

2017-09-13 15:13:53 brogrammer

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

回答

相关问题