react笔记 动态路由 get传值

1、动态路由

你在网站点击一个商品的时候。跳转到详情页面，可能会需要得到他是拿一个商品 传递一个id。

此时便用到了动态路由，动态路由允许在你的router路由后追加数据。

配置      你只需要在APP根组件中允许传值   通过link标签 追加/：[你的数据名]

    <Link to="/home/:aid">home</Link>

这样你就可以在地址后追加你的数据了。

发送       在home组件中

<Link to={`detail/${this.state.list[key].id}`}></Link>

传递你需要的参数

获取        在详情页组件中

    componentDidMount(){
        console.log(this.props.match.params.aid);
    }

你可以从props获取get方式传的值

2、get方式传值

比较传统的方式 通过get 地址栏传值

<Link to={`detail?aid=${this.state.list[key].id}`}></Link

这样就通过get传递了aid

通过地址栏截取方式获取  或者

安装url模块

npm install url --save


import url from "url"


//在下面通过

// 注意  这种方法get必须有属性名  如果直接传参数  33   那么将会得到{33:""}
var query=url.parse(this.props.location.search,true).query;
console.log(query)

//这样就得到了 get方式传递的对象  传递多个参数同样生效

最后

以上就是慈祥猫咪为你收集整理的react笔记 动态路由 get传值的全部内容，希望文章能够帮你解决react笔记 动态路由 get传值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。