React 向路由组件传递参数的几种方式

1.params参数

路由链接(携带参数)：详情
注册路由(声明接收)：
接收参数：this.props.match.params

2.search参数

路由链接(携带参数)：详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

3.state参数

路由链接(携带参数)：详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.state
备注：刷新也可以保留住参数
message.js

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() {
        const {messageArr} = this.state
        return (
            

                

                    {
                        messageArr.map((msgObj)=>{
                            return (
                                


                                    {/* 向路由组件传递params参数 */}
                                    {/* {msgObj.title} */}

                                    {/* 向路由组件传递search参数 */}
                                    {/* {msgObj.title} */}

                                    {/* 向路由组件传递state参数 */}
                                    {msgObj.title}

                                
                            )
                        })
                    }
                
                

                {/* 声明接收params参数 */}
                {/*  */}

                {/* search参数无需声明接收，正常注册路由即可 */}
                {/*  */}

                {/* state参数无需声明接收，正常注册路由即可 */}
                

            
        )
    }
}

detail.jsx

import React, { Component } from 'react'
// import qs from 'querystring'

const DetailData = [
    {id:'01',content:'你好，中国'},
    {id:'02',content:'你好，尚硅谷'},
    {id:'03',content:'你好，未来的自己'}
]
export default class Detail extends Component {
    render() {
        console.log(this.props);

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

        // 接收search参数
        // const {search} = this.props.location
        // const {id,title} = qs.parse(search.slice(1))

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

        const findResult = DetailData.find((detailObj)=>{
            return detailObj.id === id
        }) || {}
        return (
            

                
ID:{id}
                
TITLE:{title}
                
CONTENT:{findResult.content}
            
        )
    }
}