此处用到的url模块,当然方法有很多,也可以用其他方法。
1.列表页
<Link to={`/getdata?uid=${item.uid}`}>{item.name}</Link>
完整案例
传输值页面
import React, {Component} from 'react';
import '../assets/css/Cty.less'
import { Link } from "react-router-dom";
class Cty extends Component{
constructor(props){
super(props)
this.state ={
list:[
{
name:'主页',
uid:'1'
},
{
name:'热点',
uid:'2'
},
{
name:'常规',
uid:'3'
},
{
name:'遇见',
uid:'4'
},
],
}
}
render(){
return(
<div className='cty'>
<h2>我是cty</h2>
<div className="cty_list1">
{
this.state.list.map((item,key) => {
return (
<span key={key}>
<Link to={`/getdata?uid=${item.uid}`}>{item.name}</Link>
</span>
)
})
}
</div>
</div>
)
}
}
export default Cty;
接收值得页面
import React,{Component} from 'react'
import url from 'url' // 引入url 模块
class Getdata extends Component {
constructor(props) {
super(props);
this.state = {
msg:'getdata页面'
};
}
// 页面加在完成
componentDidMount(){
let miu = url.parse(this.props.location.search,true); // 解析地址
console.log(miu.query);
}
render() {
return (
<div className='getdata'>
{this.state.msg}
</div>
);
}
}
export default Getdata;
这样我们就完成了,如果对你有帮助,就点个赞吧!
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!