CODEWITHSUNDEEP
javascriptreactjsbrowserreact-router
Huzaifa Ahmed
Huzaifa Ahmed

Reputation: 323

In React Router, how do i remove / change the param in history.push that i have sent before?

I am using react-router-dom version 4.3.1, and I am passing param to another route, all things are working fine but now I have to change / remove that param, how do I do that ?

I have tried this

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
}

Basically I am deleting admin from his/her profile page and then navigate to all admin page and in this page I want to show success message of deletion of admin.

so I am working with true like,

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

and alert will close automatically, but checkDelete is always true, how do I make it remove or making it false.

Upvotes: 3

Views: 6535

Answers (2)

Rehan Sattar
Rehan Sattar

Reputation: 4005

The stack of history object is maintained by router and every time it will get the state: { deleted: true }. One possible hack could be to update the history stack by pushing the same route address but setting the state: { deleted: false }.

we can do this in componentDidMount like this: 

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

Upvotes: 3

Muhazzib UD-din Farooqui
Muhazzib UD-din Farooqui

Reputation: 109

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

On hiding message alert success use the above code snippet.

Upvotes: 1

Related Questions