import React, { Component } from 'react'import {Route,Switch,Link} from 'react-router-dom'
import Detail from '../Message/Detail'export default class Message extends Component {
state={ myDetail:[ {id:'01',title:'章华'}, {id:'02',title:'刘永'}
, {id:'03',title:'永清'} ] } go=()=>{ this.props.history.go(-
2) } back=()=>{ this.props.history.goBack(); } forward=()=>{ thi
s.props.history.goForward(); } pushShow=(id,title)=>{ // push跳转+携带parmas参数
// 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/detail`,{id:id,t
itle:title}) } replaceShow=(id,title)=>{ // 编写一段代码让其跳转到Detil组件，且为replace跳转
// 使用路由组件自身所携带的属性，history.replace // replace跳转+携带parmas参数 // this.prop
s.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/detail`,{id:id,tit
le:title}) } render() { const {myDetail} = this.state; return (
<div> <ul> { myDetail.map(myOb
j=>{ return ( <li key={myObj.id}>
{/* 向路由组件传递parmas参数 */} {/* <Link to={`
/home/message/detail/${myObj.id}/${myObj.title}`}>{myObj.title}</Link>
&nbsp;<button onClick={()=>{this.pushShow(myObj.id,myObj.title)}}>push查看</button>
&nbsp;<button onClick={()=>{this.replaceShow(myObj.id,myObj.tit
le)}}>replace查看</button> */} {/* 向路由组
件传递search参数 */} {/* <Link to={`/home/message/detail?id=${myObj.i
d}&title=${myObj.title}`}>{myObj.title}</Link> */}
{/* 向路由组件传递state参数 */} <Link to={{pathname:'/home
/message/detail',state:{id:myObj.id,title:myObj.title}}}>{myObj.title}</Link>
&nbsp;<button onClick={()=>{this.pushShow(myObj.i
d,myObj.title)}}>push查看</button> &nbsp;<button onClick={()=>{thi
s.replaceShow(myObj.id,myObj.title)}}>replace查看</button> </li>
) })
} </ul> <Switch> {/* 声明接收parmas参数
*/} {/* <Route path="/home/message/detail/:id/:title" component={Detail
}></Route> */} {/* search传参无需声明接收，正常路由规则即可 */} {/* <
Route path="/home/message/detail" component={Detail}></Route> */} {/* s
tate传参无需声明接收，正常路由规则 */} <Route path="/home/message/detail" component={D
etail}></Route> </Switch> <button onClic
k={this.forward}>前进</button>&nbsp; <button onClick={this.back}>后退</button>&
nbsp; <button onClick={this.go}>go</button> </div> ) }}