react中使用按钮实现路由跳转(编程式路由导航)

一、前言

1.1：
大家都知道路由跳转需要使用路由链接来实现
但是有的情况下我们想点击一些按钮也实现路由跳转，怎么办呢？
这就不得不说：编程式路由导航了

二、编程式路由导航的使用

2.1：主要方法：
在组件的 props 中的 history 身上就提供了实现 编程式路由导航 的方法
我们主要了解 replace() 和 push()
2.2、不同参数传递的不同写法：
在按钮上绑定 replaceShow 方法
实现方法：

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.push 和 replace 方法写法一样，
区别在于：
push是在浏览记录中添加一条记录，可以通过回退按钮回去之前的记录
replace 是在浏览记录中替换当前一条的记录，不能通过回退按钮回去之前的记录
个人博客：余生的学习笔记