Question

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

Answer 1

您可以签出此codesandbox的示例可能会帮助您或正在寻找该示例的人。在这种情况下，我们可以防止用户返回上一页，有关详细信息，请参见{{3 }}。这只是代码的一小部分

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

有关完整的工作示例，请点击medium article

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) {

});

使用此功能，它将读取您的浏览器的后退按钮单击事件，然后您可以应用任何条件

Answer 4

使用React页面生命周期的<Switch> // ... all other routes <Route render={(routeProps) => ( <HttpError data={"Undefined URL: " + routeProps.match.url} /> )} /> </Switch>方法，您可以处理或禁用浏览器中的返回功能。基本上componentDidUpdate方法会在组件更新时自动调用。因此，一旦您的组件更新了，您可以防止再次返回如下。

componentDidUpdate

这将防止用户返回并使用当前页面作为历史对象的引用。因此，即使用户单击浏览器的后退按钮，他们也不能在最后一页中返回原词。

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

4 个答案: