每当确认为假时，防止 React Router 的当前路径发生变化

Question

当我点击浏览器的后退按钮然后点击确认框中的“取消”按钮时，我无法阻止路径重定向。

componentDidMount() {
    window.addEventListener('popstate', this.quit);
}

quit = () => {
    if(confirm('Quit?')) {
        location.assign('/'); // Refreshes the browser then redirects to the homepage
        history.pushState(null, null, null); // Clears the previous history
    } else {
        // What to do if the user clicks "Cancel"?
    }
}

我尝试了return false，但它仍在将应用程序重定向到主页（但没有刷新页面）。我尝试过其他解决方案，例如 location.pathname = '/currentPathname' 和 location.replace('/currentPathname')，但由于这些解决方案重新加载浏览器，它会显示 Cannot get /currentPathname，因为 React Router 不需要重新加载。 <Prompt /> 组件也没有解决问题，因为它没有我可以执行上面代码的函数道具。

Answer 1

实现初始目标的最佳选择是使用 防止不必要的导航。您还可以像这样同时使用componentDidMount 和componentWillUnmount 受益：

componentDidUpdate = () => {
    //Prompt Browser Refresh / Close
    if ("Your Condition" || true) {
      window.onbeforeunload = () => true;
    } else {
      window.onbeforeunload = undefined;
    }
};

componentDidMount() {
    this.setState({ shouldPrompt: true });
    this.props.history.listen((location, action) => {
      console.log(location);
      if (action === "POP") {
      }
    });
}

...

render() {
    return (
        <Prompt
          when={shouldPrompt}
          message="You have unsaved changes, are you sure you want to leave?"
        >
          <Switch>
            <Route path="/" component={Page1} exact />
            <Route path="/page2" component={Page2} exact />
          </Switch>
        </Prompt>
    )
}