react编程式路由有两种：replace和push

编程式路由有两种：replace和push
三个步骤：传参跳转----->注册路由----->接受参数
路由跳转的背景是onClick点击事件

<button onClick={()=>{this.forward()}}>前进</button>
<button onClick={this.go}>go</button>

**

第一个步骤：传参跳转(编程式路由跳转的两种方式：replace和push)

**

replace跳转(分别传递params、search、state三种参数)

replaceShow=(id,title)=>{
    // 1.replace跳转+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // 1.replace跳转+携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    // 1.replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`,{id:id,title:title})
  }

push跳转(分别传递params、search、state三种参数)

 pushShow = (id,title)=>{
    // 1.push跳转+携带params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // 1.push跳转+携带search参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    // 1.push跳转+携带state参数
    this.props.history.push(`/home/message/detail/`,{id,title})
  }

**

第二个步骤：注册路由

**

{/* 路由注册 */}

        {/* 2. 声明接收 params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* 2. search参数 无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* 2. state参数 无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>

**

第三个步骤：接收参数

**

  // 3. 接收       路由组件接收 parms参数
    // const {id,title} = this.props.match.params

    // 3. 接收       路由组件接收 search参数
    // const {search} = this.props.location // ?id=03&title=%E6%B6%88%E6%81%AF3
    // const {id,title}=queryString.parse(search) // {id: '01', title: '消息1'}

    // 3. 接收       路由组件接收 state参数
    const {id,title} = this.props.location.state

下面是测试编程式路由跳转的路由组件代码
编程式路由跳转 与 路由注册 组件

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
//  	1. 编程式路由跳转的两种方式：replace 和 push 跳转步骤
  replaceShow=(id,title)=>{
    // replace跳转+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // replace跳转+携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    // replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`,{id:id,title:title})
  }
  pushShow = (id,title)=>{
    // push跳转+携带params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // push跳转+携带search参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    // push跳转+携带state参数
    this.props.history.push(`/home/message/detail/`,{id,title})
  }
  back = ()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()
  }
  go=()=>{
    this.props.history.go(2)
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.messageArr.map((item) => {
            return (
              <li key={item.id}>
                <button onClick={()=>{this.pushShow(item.id,item.title)}}>push</button>
                <button onClick={()=>{this.replaceShow(item.id,item.title)}}>replace</button>
              </li>
            )
          })}
        </ul>
        <hr/>

       //     2. 路由注册 步骤

        {/* 2. 声明接收 params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* 2. search参数 无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* 2. state参数 无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>
        <button onClick={this.back}>回退</button>
        <button onClick={()=>{this.forward()}}>前进</button>
        <button onClick={this.go}>go</button>
      </div>
    )
  }
}

接收参数路由组件

import React, { Component } from 'react'
import queryString from 'query-string';
const detailObj = [
  {id:'01',value:'我爱你中国'},
  {id:'02',value:'我爱你 努力的自己'},
  {id:'03',value:'我爱你 更好的自己'}
]
export default class Detail extends Component {
  
  render() {
  	//  	3.接受参数步骤
    // 3. 接收       路由组件接收 parms参数
    // const {id,title} = this.props.match.params

    // 3. 接收       路由组件接收 search参数
    // const {search} = this.props.location // ?id=03&title=%E6%B6%88%E6%81%AF3
    // const {id,title}=queryString.parse(search) // {id: '01', title: '消息1'}

    // 3. 接收       路由组件接收 state参数
    const {id,title} = this.props.location.state
    // 该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）的数组的第一个元素的值。
    const resultObj = detailObj.find((item)=>
      item.id === id
    )
    return (
      <div>
        <ul>
          <li>ID:{id}</li>
          <li>TITLE:{title}</li>
          <li>CONTENT:{resultObj.value}</li>
        </ul>
      </div>
    )
  }
}