如何在react路由器历史中创建一个不稳定状态

Question

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

工作流程如下，

1. 用户在页面A中键入内容并提交。然后做历史。推到下一页。

   history.push(/pageB/path, {message: 'Success!'});
   

2. 在页面B中，它将在顶部显示成功消息。

然而，这个成功消息将永远存在，如果用户按照前面的步骤再次转到页面A，这将使用户感到困惑。然后返回页面B(可以是浏览器上的后退按钮或表单上的取消按钮)而不提交。此消息仍将显示在页面顶部。

我的目标是只在用户提交表单后显示消息。所以我的问题是，有没有一种方法可以使历史状态不稳定，这样当用户刚返回页面B时消息就不会显示。

欢迎提出任何建议。谢谢

编辑：我目前的解决方案是检查历史的操作(弹出或推送)，并且只在操作是推送时显示消息。但正在寻找更好的解决方案。

编辑：为了进一步澄清我的问题。以下是用户操作和浏览器历史记录。

1. 操作：用户在页面A中并提交表单。

   历史：

   0:pageA

2. 操作：用户已重定向到页面B(带有成功消息)

   历史：

   0:pageA

   1:具有history.location.state.message=的页面B。。。

3. 操作：用户在没有提交表单的情况下再次转到页面a

   历史：

   0:pageA

   1:具有history.location.state.message=的页面B。。。

   2:pageA

4. 操作：用户通过浏览器的后退按钮返回页面B

   历史：

   0:pageA

   1:具有history.location.state.message=的页面B。。。

在步骤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