React get传值

此处用到的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;

这样我们就完成了,如果对你有帮助,就点个赞吧!
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值