Question

在onEnter的反应路由器documentation中，他们指定了如何处理，但onLeave没有示例。我的问题是如何确认用户是否想要正确地离开页面。

根据以下两种情况下的代码，用户点击cancel或ok是否会离开页面。但是，根据逻辑，onEnter钩子工作正常。

const checkEnterAbout = (nextState, replace, callback) => {
    if(!confirm('do you want to enter really!!!')){
        replace(`/`);
    }else{
        callback();
    }

}

const checkLeaveAbout = (prevState) => {
    console.log(prevState);
    return confirm("Are you sure you want to leave this page");
}

<Route path="/about"  component={About} onEnter={checkEnterAbout} onLeave={checkLeaveAbout} />

当我尝试withRouter确认指南时。它给了我一个

的错误

Failed prop type: Invalid prop `component` supplied to `Route`.
    in Route

Answer 1

有一个名为routerWillLeave的钩子，这是一个例子：

https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md

在反应路由器中onEnter与onLeave相同

1 个答案: