Question

我正在使用4.3.1版本的react-router-dom版本，并且我将param传递到另一条路由，一切正常，但是现在我必须更改/删除该param，我该怎么做？

我已经尝试过了

this.props.location.state.deleted = false

//admin profile page
history.push('/home/admins', { state: { deleted: true } });

//all admins page
componentDidMount(){
  const checkDelete = this.props.location.state.deleted // true
}

基本上，我要从他/她的个人资料页面中删除管理员，然后导航至所有管理员页面，并且在此页面中，我要显示删除管理员的成功消息。

所以我正在使用 true 之类的

componentDidMount(){
  const checkDelete = this.props.location.state.deleted // true
  if(checkDelete){
   this.setState({
    messageAlert:true
   })
  }
}

并且警报将自动关闭，但是checkDelete始终为true，如何将其删除或设置为false。

Answer 1

 const state = { ...history.location.state };
 delete state.deleted;
 history.replace({ ...history.location, state });

成功隐藏消息警报时，请使用上面的代码段。

Answer 2

history对象的堆栈由路由器维护，并且每次它将获得state: { deleted: true }时。一种可能的破解方法是通过推送相同的路由地址但设置state: { deleted: false }来更新历史记录堆栈。

我们可以在componentDidMount中执行以下操作：

  const checkDelete = this.props.location.state.deleted // true
  if(checkDelete){
   this.setState({
    messageAlert:true
   }, () => { 
      history.replace('/home/admins', {state: { deleted : false }}) // false
   }
}

在React Router中，如何删除/更改之前发送的history.push中的参数？

2 个答案: