javascript - 在 react 路由器中，onEnter 与 onLeave 相同

Question

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

根据下面给出的代码，在这两种情况下，无论用户单击 cancel 还是 ok，它都会离开页面。但是 onEnter Hook 按照逻辑工作正常。

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

有一个钩子(Hook)叫做routerWillLeave，下面是一个例子:

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