react-router-dom, how to skip back button

user_11451428 0
Viewed 508

I have a list of items that navigate user to another page when clicked on.
The problem is that the destination page requires some sort of id that is not present in this list item page. so i do this:
list-page:

{items.map(item=>{
    return <Link to="/resolver/${item}">{item}</Link>
})

Resolver page:

componentDidmout(){
   const {keyword} = this.props.match.params;
   this.props.searchOnServer(keyword)
}
componentDidUpdate(pervProps){
   //after checking some conditions:
   const {redirect_id} = this.props.server_response;
   this.props.history.push(`/some/path/${redirect_id}`)
}

and then the destination page can use that id to fetch product related data:

componentDidMount(){
   const {id} = this.props.match.params;
   fetchSomeStuff(id);
}

Now, the above solution works totally fine, the only problem I have is that when user clicks on back button in destination page, it goes back to resolver page and the whole cycle starts over again. how can i skip the resolver page and go back to the list page.

react-router-dom reactjs
1 Answers

You can do a redirect from the resolver page, so when a user hits the back button from the new page they will go back to the page prior to the resolver path.

Change history.push with history.replace.

History

componentDidUpdate(pervProps){
   //after checking some conditions:
   const {redirect_id} = this.props.server_response;
   this.props.history.replace(`/some/path/${redirect_id}`)
}
user_86908570
Related