React Router Dom v4 处理浏览器后退按钮

Question

如何使用react-router-dom v4 禁用用户点击浏览器后退按钮？

我在页面上显示一个模式，当用户按下浏览器后退按钮时，用户会被带到上一个屏幕，而不是我想简单地关闭模式。

我试过这样做

onBackButtonEvent(event) {
    event.preventDefault();  
    // the user shouldn't be able to move backward or forward  
}
componentDidMount() {
    window.onpopstate = this.onBackButtonEvent;
}

但这并不能阻止用户后退或前进。有没有办法通过react-router-dom 处理这个问题？

我尝试了多种解决方案，但似乎没有任何效果。

Answer 1

我知道这个问题有点老了，但我在自己寻找答案时偶然发现了它。没有干净的方法可以“禁用”后退按钮，而是让用户仅在单击浏览器后退按钮时关闭模式，我发现这可以工作。

只需将历史记录传递给 props 中的模态组件，然后在 componentWillUnmount 函数上调用以下代码。

componentWillUnmount() {
    this.props.history.goForward();
}

这将无缝地强制浏览器停留在同一页面上但关闭模式（假设它是一个类组件）。

更新：如果使用功能组件，上面的 componentWillUnmount 函数看起来像下面的钩子。

React.useEffect(() => {
    return () => {
            props.history.goForward();
        }
    }, []);

Answer 2

您可以为您的模态创建一个新的Route，并将其保留在您的Switch 之外。这样，常规导航仍然适用，您还可以在 Switch 中呈现的内容之上呈现模式。

示例

function Home() {
  return <div> Home </div>;
}

function MyRoute() {
  return (
    <div>
      <h1>MyRoute</h1>
      <Link to="/myroute/edit"> Edit </Link>
      <Route
        path="/myroute/edit"
        render={({ history }) => (
          <ModalComponent history={history}>
            Welcome to the MyRoute edit screen
          </ModalComponent>
        )}
      />
    </div>
  );
}

class ModalComponent extends React.Component {
  onClick = e => {
    e.preventDefault();
    this.props.history.goBack();
  };

  render() {
    return (
      <Modal isOpen>
        <h1> {this.props.children} </h1>
        <Link to="/myroute" onClick={this.onClick}>
          Back
        </Link>
      </Modal>
    );
  }
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/"> Home </Link>
        <Link to="/myroute"> My Route </Link>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/myroute" component={MyRoute} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
Modal.setAppElement(rootElement);
ReactDOM.render(<App />, rootElement);