方式一,使用withRouter,进行跳转
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import layoutCss from './header.module.scss'
class index extends Component {
constructor(props) {
super(props)
}
state = {
menulist: [
{
desc: '首页',
route: '/',
},
{
desc: '新闻',
route: '/news',
},
{
desc: '个人中心',
route: '/info',
},
],
}
menuHandler = (item, index) => {
this.props.history.push(item.route)
}
render() {
return (
<div className={layoutCss.wrapper}>
<ul className={layoutCss.menubox}>
{this.state.menulist.map((item, index) => {
return (
<li key={item.desc} onClick={this.menuHandler.bind(this, item, index)}>
{item.desc}
</li>
)
})}
</ul>
</div>
)
}
}
export default withRouter(index)
参数传递方式:
menuHandler = (item, index) => {
this.props.history.push(item.route, { age: 13, name: 'zhangsan' })
// 另外也可以通过location.href search进行传参 this.props.history.push(item.route + '?age=13&name=zhangsan')
}
跳转的页面接收:
import React, { Component } from 'react'
export default class index extends Component {
constructor(props) {
super(props)
}
componentWillMount(){
console.log(this.props.location)
}
render() {
return <div>个人中心页</div>
}
}
输出的结果:页面刷新时数据仍保留
方式二,使用react-router-dom提供的Link组件进行页面跳转
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import layoutCss from './header.module.scss'
class index extends Component {
constructor(props) {
super(props)
}
state = {
menulist: [
{
desc: '首页',
route: '/',
},
{
desc: '新闻',
route: '/news',
},
{
desc: '个人中心',
route: '/info',
},
],
}
menuHandler = (item, index) => {
console.log('点击的菜单为', item.desc)
}
render() {
return (
<div className={layoutCss.wrapper}>
<ul className={layoutCss.menubox}>
{this.state.menulist.map((item, index) => {
return (
<Link tag="li" to={item.route} key={item.desc} onClick={this.menuHandler.bind(this, item, index)}>
{item.desc}
</Link>
)
})}
</ul>
</div>
)
}
}
export default index
参数传递方式1:
// 方式1
<Link tag="li" to={item.route + '?age=12&name=zhangsan'} key={item.desc} onClick={this.menuHandler.bind(this, item, index)}>
{item.desc}
</Link>
跳转的页面接收:页面刷新时数据仍保留
import React, { Component } from 'react'
export default class index extends Component {
constructor(props) {
super(props)
}
componentWillMount(){
console.log(this.props.location)
}
render() {
return <div>个人中心页</div>
}
}
输出的结果:
参数传递方式2:
// 方式2
<Link
tag="li"
to={{
pathname: item.route,
query: {
age: 14,
name: 'zhangsan'
}
}}
key={item.desc}
onClick={this.menuHandler.bind(this, item, index)}>
{item.desc}
</Link>
跳转页面接收:
import React, { Component } from 'react'
export default class index extends Component {
constructor(props) {
super(props)
}
componentWillMount(){
console.log(this.props.location)
}
render() {
return <div>个人中心页</div>
}
}
输出的结果:
注:此种方式传递参数时,页面再次刷新时,参数会丢失。
以上两种是目前查找到的可行的两种方式,后续有其它方式待补充。