如何在反应路由器历史记录中创建一个易失性状态？

Question

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

的工作流程是这样的，

1. 用户类型的东西在pageA的，并提交。然后做history.push到下一页。

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

2. 并在页面B，它会显示在顶部成功的消息。

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

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

任何建议是值得欢迎的。谢谢！

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

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

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

   历史：

   0：pageA的

2. 动作：用户已经被重定向到页面B（与成功消息）

   历史：

   0：pageA的

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

3. 操作：用户去pageA的无需再次提交表单

   历史：

   0：pageA的

   1：页面B与history.location.state.message = ...

   2 ：pageA的

4. 操作：用户返回页面B通过浏览器

   历史的后退按钮：

   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