Question

我目前正在重定向页面上显示成功/失败消息。

工作流程看起来像这样，

用户在pageA中输入内容并提交。然后做history.push到下一页。
```
    history.push(/pageB/path, {message: 'Success!'});
```
在pageB中，它会在顶部显示成功消息。

但是，此成功消息将永远存在，如果他们按照前面的步骤再次转到pageA，则会使用户感到困惑。然后返回到pageB（可以是浏览器上的后退按钮或表单上的取消按钮），无需提交。此消息仍将显示在页面顶部。

我的目标是仅在用户提交表单后显示消息。所以我的问题是有没有办法让历史状态变得不稳定，以便当用户回到pageB时，消息不会显示出来。

欢迎任何建议。谢谢！

编辑：我当前的解决方案是检查历史记录的操作（弹出或推送），并仅在推送操作时显示消息。但是寻找更好的解决方案。

编辑：更清楚我的问题。这是用户操作和浏览器历史记录。

操作：pageA中的用户并提交表单。

历史：

0：pageA
操作：用户已重定向到pageB（带有成功消息）

历史：

0：pageA

1：pageB with history.location.state.message = ...
操作：用户再次转到pageA而不提交表单

历史：

0：pageA

1：pageB with history.location.state.message = ...

2：pageA
操作：用户通过浏览器的后退按钮返回pageB

历史：

0：pageA

1：pageB with history.location.state.message = ...

在步骤4中，它返回旧历史1，其中已设置状态的消息，因此它仍然存在（但不应该，因为用户没有提交表单）。

编辑：我在想是否可以直接修改历史记录以从页面中删除状态？

Answer 1

使用以下代码，您可以在提交表单后传递道具

history.push({pathname:'/pageB', message: 'successs'})

然后在pageB

this.setState({ isMessageTextTimeExpired: false }) // in constructor

componentDidMount() {
    if (this.state.isMessageTextTimeExpired) {
        setTimeout( () => {
            this.setState({ isMessageTextTimeExpired: true });
        }, 5000) // your desire time to hide message
     }
}

componentWillReceiveProps(nextProps) {
    const previousPath = this.props.location.pathname;
    if (previousPath === 'pathA') {
      this.setState({ isMessageTextTimeExpired: true })
    }
  }


render() {
    const { redirectMessage } = this.props.history.location;
    const { isMessageTextTimeExpired } = this.state;
    return (
          redirectMessage && isMessageTextTimeExpired ? redirectMessage : null // print redirectMessage if it exist
   )
}

通过上述内容，只要您在未传递pathB的情况下到达message，就不会显示任何内容。如果message存在，它将被渲染，但在5秒后被移除。此外，如果您之前的路径为pathA，则不会显示message

如何在react-router历史记录中创建一个易失性状态？

1 个答案: