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>
        )
    }
}