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 来处理这个问题？

我尝试了多种解决方案，但似乎都没有起作用。

- Singh

---

但这恰恰是我想要避免的，我不想创建新的路由。我的意思是，模态框不应该有不同的路由，对吧？ - Singh

我不明白为什么不可以。 - Tholle

只需将其放在 Switch 之外，这样 /myroute 和 /myroute/edit 就可以同时呈现。 - Tholle

好的，我会尝试这样做。 - Singh

我创建了一个简单的示例，也许你可以用来获得灵感：https://codesandbox.io/s/3x534mkz5p - Tholle

Answer 1

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

只需将历史记录传递到您的模态组件中的props中，并在 componentWillUnmount 函数上调用下面的方法即可。

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

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

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

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

- James Morrison

---

非常好。对于我想要的模态框完美地工作。 - hellowill89

Answer 2

你可以为你的模态框创建一个新的路由，并将其保留在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);

- Tholle

---

我实现了这个功能，但当我按下按钮时，它会给我一个错误，显示“TypeError: Cannot read property 'props' of undefined”。 - Maifee Ul Asad