Using buttons in react to implement routing jumps (programmatic routing navigation)

I. Introduction

1.1:
Everyone knows that routing jumps need to be implemented using routing links.
But sometimes we want to click some buttons to also achieve routing jumps. What should we do?
This has to be said: programmatic routing and navigation

2. Use of programmatic route navigation

2.1: Main method:
The history in the props of the component provides a method to implement programmatic route navigation.
We mainly understand replace() and push()
2.2. Different writing methods for different parameter transfer:
bind the replaceShow method on the button
to implement method:

replaceShow = (id,title)=>{
    
    
    //实现编程式路由导航 + params参数
    this.props.history.replace(`/home/message/detail/${
      
      id}/${
      
      title}`)

    //实现编程式路由导航 + search参数
    // this.props.history.replace(`/home/message/detail/?id=${id}$title=${title}`)

    //实现编程式路由导航 + params参数
    // this.props.history.replace(`/home/message/detail`,{id:id,title:title})
  }

2.3. The push and replace methods are written in the same way.
The difference is:
push is to add a record to the browsing history, and you can go back to the previous record through the back button.
replace is to replace the current record in the browsing history, and you cannot go back to the previous record through the back button. Records
Personal blog: Study notes for the rest of my life