React 路由跳转携带params、search、state参数，以及编程式路由导航

        实现效果——点击展台1、展台2、展台3时，会显示同一个名为Detail路由组件，但是组件接收的值会不一样：

文件目录：

传递params参数时地址栏显示：/home/message/detail/03/展台3

传递search参数时地址栏显示：/home/message/detail/?id=03&title=展台3

传递state参数时地址栏显示：/home/message/detail

 Message>index.jsx:

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

export default class Message extends Component {
  constructor() {
    super();
    this.state = {
      messageArr: [
        { id: "01", title: '展台1' },
        { id: "02", title: '展台2' },
        { id: "03", title: '展台3' }
      ]
    }
  }
  //编程式路由跳转
  //实现跳转到Detail组件，且为replace跳转
  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/detaile`,{id,title})
  }
  //实现跳转到push组件，且为push跳转
  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/detaile`,{id,title})
  }
  //回退
  back = () => {
    this.props.history.goBack()
  }
  //前进
  forward = () => {
    this.props.history.goForward()
  }

  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  {/* 1.向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                  &nbsp;<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                  &nbsp;<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>

                  {/* 1.向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 1.向路由组件传递state参数 */}
                  {/* <Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link> */}
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 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} /> */}
        <hr />
        <button onClick={this.back}>回退</button>
        <button onClick={this.forward}>前进</button>
      </div>
    )
  }
}

  Message>Detail>index.jsx:

import React, { Component } from 'react';
// import querystring from 'querystring';//search参数时导入，获取到的search是urlencoded编码字符串，需要借助querystring解析

const DetailData = [
  { id: '01', content: '你好,01' },
  { id: '02', content: '你好,02' },
  { id: '03', content: '你好,03' },
]
export default class Detail extends Component {
  render() {
    //3.接收params参数
    const { id, title } = this.props.match.params//解构赋值

    //3.接收search参数
    // const { search } = this.props.location//search:"?id=01&title=消息1"
    // const { id, title } = querystring.parse(search.slice(1))//querystring.parse字符串转对象;当search还是字符串时,使用slice方法把第一个问号去掉

    //3.接收state参数
    // const { id, title } = this.props.location.state || {}

    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id //如果某一项对象的id和我传过来的Id相等，findResult就等于这一项对象
    }) || {}
    return (
      <ul>
        <li>id:{id}</li>
        <li>title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}