如何防止用户返回react-router-dom？

Question

我在我的reactjs应用程序中使用react-router-dom进行路由。我想防止用户在登录后返回，即我不想用户在登录后点击浏览器上的后退按钮时再次在登录屏幕上返回。

Answer 1

您可以签出此codesandbox示例可能会对您或正在寻找same.In的人有所帮助此我们可以防止用户返回到上一页，有关更多详细信息，请签出此medium article。以下是代码的一小部分

componentDidMount() {
 const { history } = this.props;
  window.addEventListener("popstate", () => {
  history.go(1);
});
}

有关完整的工作示例，请单击this link.

Answer 2

你在使用redux吗？否则，你可以在你的渲染中添加一些东西来检查用户是否已经登录，它将用户重定向回他喜欢的页面：

import { Redirect } from 'react-router'


render(){
//I store my user JWT on this.props.currentUser redux state 
this.props.currentUser && <Redirect to={'whatever page you want'} /> 

//OR you can also, if you have history, history.goBack()

因此，不是禁止返回，而是禁止用户在登录时访问登录页面，它会将用户重定向到某个位置或返回到他所在的位置

Answer 3

window.addEventListener('popstate', function(event) {

});

使用这个函数，这将读取你的浏览器后退按钮点击事件，然后你可以应用任何你想要的条件