React Router Dom v4句柄浏览器返回按钮

Question

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

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

Answer 1

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

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

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

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

UPDATE：如果使用功能组件，上面的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);