如何使用react-router-domv4禁用用户单击浏览器后退按钮？
我在页面上显示一个模式，当用户按下浏览器后退按钮时，用户被带到上一个屏幕，而不是我想简单地关闭模式。
我试过这样做
onBackButtonEvent(event) {
event.preventDefault();
// the user shouldn't be able to move backward or forward
}
componentDidMount() {
window.onpopstate = this.onBackButtonEvent;
}
但这并不能阻止用户后退或前进。有没有办法通过 处理这个问题react-router-dom？
我尝试了多种解决方案，但似乎没有任何效果。
我知道这个问题有点老了，但我在自己寻找答案时偶然发现了它。没有干净的方法可以“禁用”后退按钮，但要使用户仅在单击浏览器后退按钮时才关闭模态，我发现这是可行的。
只需将历史记录传递到 props 中的模态组件并在componentWillUnmount函数上调用以下内容。
componentWillUnmount() {
this.props.history.goForward();
}
这将无缝地强制浏览器停留在同一页面上但关闭模式（假设它是一个类组件）。
更新：如果使用功能组件，上面的 componentWillUnmount 函数看起来像下面的钩子。
React.useEffect(() => {
return () => {
props.history.goForward();
}
}, []);
您可以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);