借助this.props.history对象上的API对操作路由跳转,前进,后退,具体方法调用如下:
this.props.history.push( )
this.props.history.replace( )
this.props.history.goBack( )
this.props.history.goForward( )
this.props.history.go( )
代码示例:
Message.jsx
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:'001', title:'消息1'},
{id:'002', title:'消息2'},
{id:'003', title:'消息3'}
]}
replaceShow = (id,title) => {
//replace跳转+接收params参数
this.props.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, title})
}
pushShow = (id,title) => {
//push跳转+接收params参数
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, title})
}
back = () => {
this.props.history.goBack()
}
forward =() => {
this.props.history.goForward()
}
go =() => {
this.props.history.go(2)
}
render() {
const {messageArr} = this.state
return (
<div>
<ul>
{
messageArr.map((messageObj) => {
return (
<li key={messageObj.id}>
{/* 向路由组件传递params参数 */}
<Link to={`/home/message/detail/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</Link>
<button onClick= {() => this.pushShow(messageObj.id, messageObj.title)}>push查看</button>
<button onClick= {() => this.replaceShow(messageObj.id, messageObj.title)}>replace查看</button>
{/* 向路由组件传递search参数 */}
{/* <Link to={`/home/message/detail/?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link> */}
{/* 向路由组件传递state参数 */}
{/* <Link replace to={
{pathname:'/home/message/detail',state:{id:messageObj.id,title:messageObj.title}}}>{messageObj.title}</Link> */}
</li>
)
})
}
</ul>
{/* 注册路由并声明params参数 */}
<Route path="/home/message/detail/:id/:title" component={Detail}/>
{/* search参数无需声明接收,正常注册路由即可 */}
{/* <Route path="/home/message/detail" component={Detail}/> */}
{/* state参数无需声明接收,正常注册路由即可 */}
{/* <Route path="/home/message/detail" component={Detail}/> */}
<button onClick= {this.forward}>前进</button>
<button onClick= {this.back}>后退</button>
<button onClick= {this.go}>前进或者是后退</button>
</div>
)
}
}
Detail.jsx
import React, { Component } from 'react'
// import qs from 'querystring'
// let obj = {name:'tom', age:18} //name=tom&age=18
// console.log(qs.stringify(obj));
// let str = 'name=tom&agt=18'
// console.log(qs.parse(str));
const DetailData =[
{id:'001', content:'你好,中国'},
{id:'002', content:'你好,爸爸'},
{id:'003', content:'你好,未来的自己'}
]
export default class Detail extends Component {
render() {
//接收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 (
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
)
}
}