React中路由传递参数的三种形式

一、params参数(传递的参数显示在url地址)

//  1、路由链接(携带参数) 
<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>

//  2、注册路由(声明接收参数)
<Route path="/home/message/detail/:id/:title" component={Detail}/>

//  3、接收parms参数
	const {id,title} = this.props.match.params

二、search参数(传递的参数显示在url地址)。也可以叫query参数

//  1. 路由链接(携带参数)
<Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>

//  2. 注册路由(无需声明，正常注册即可)
<Route path="/home/message/detail" component={Detail}/>

//  3. 接收参数
//		备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
import queryString from 'query-string';
 const {search} = this.props.location // ?id=03&title=%E6%B6%88%E6%81%AF3
 const {id,title}=queryString.parse(search) // {id: '01', title: '消息1'}

三、state参数(传递的参数不在url地址显示，刷新也可以保留住参数)

//  1. 路由链接(携带参数)
<Link to={{pathname:'/home/message/detail',state:{id:item.id,title:item.title}}}>{item.title}</Link>

// 2. 注册路由(无需声明，正常注册即可)
<Route path="/home/message/detail" component={Detail}/>

//  	3. 接收参数
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' }
    ]
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.messageArr.map((item) => {
            return (
              <li key={item.id}>
                {/* 路由链接(携带参数) */}
                
                {/* 1. 携带参数    向路由组件传递 params参数 */}
                {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}

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

                {/* 1. 携带参数    向路由组件传递 state参数 */}
                <Link to={{pathname:'/home/message/detail',state:{id:item.id,title:item.title}}}>{item.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}/>
      </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. 接收       路由组件接收 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>
    )
  }
}