react笔记 动态路由 get传值

1、动态路由

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

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

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

    home

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

发送       在home组件中

传递你需要的参数

获取        在详情页组件中

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

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

2、get方式传值

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

这样就通过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方式传递的对象  传递多个参数同样生效