react中路由跳转传参push replace

传递参数的跳转页面

import React, { Component } from 'react'
import {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'}
        ]
    } 

    go = (data)=>{
        // this.props.history.push('/home/message/detail',data) // push压栈可以后退前进
        this.props.history.replace('/home/message/detail',data)  //replace传值是替换,不可前进后退
    }
    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                   {
                       messageArr.map((msgObj)=>{
                         return(
                             <li key={msgObj.id} onClick={()=>this.go({id:msgObj.id,title:msgObj.title})}>
                                {msgObj.title}
                             </li>
                            )
                       })
                   }
                </ul>
                <hr/>
                <Route path="/home/message/detail" component={Detail} />
            </div>
        )
    }
}

跳转的目标页面

import React, { Component } from 'react'
const DetailData = [
    {id:'01',content:'你好,中国'},
    {id:'02',content:'你好,世界'},
    {id:'03',content:'你好,未来的自己'}
]

export default class index extends Component {
    render() {
        const {id,title} = this.props.location.state || {}
        //this.props.location.state 就是传递的参数对象
        const findResult = DetailData.find((detailObj)=>{
            return detailObj.id ===id
        }) || {}
        return (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        )
    }
}

还可以利用<Link></Link>标签中的replace属性将路由跳转模式改变成replace模式，默认的路由跳转模式就是push

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 (
            <div>
                <ul>
                   {
                       messageArr.map((msgObj)=>{
                         return(
                             <li key={msgObj.id}>
                                 {/**向路由组件传递state参数*/}
                                 <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                             </li>
                            )
                       })
                   }
                </ul>
                <hr/>
                {/** search参数无需声明接收 ，正常注册声明*/}
                <Route path="/home/message/detail" component={Detail} />
            </div>
        )
    }
}