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

您可以为模态创建一个新的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);

Answer 2

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

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

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

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

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

2 个答案: