react-router4.X 跳转传参
在react-router4.x以上,将router分为react-router-dom
与react-router-native
,开发web我们只需要安装react-router-dom
就可以。其实它的一些传参、取参和原生的方法是非常类似的。

一、params传参
params传参 刷新页面 数据存在;但是路由路径后面需要加上/:paramsName
我这里使用了react-router-config
分离了路由配置

跳转:
this.props.history.push("/my-order/123")
取参:
this.props.match.params.id
二、state传参
state传参 刷新页面 数据会丢失
首先我们不传参直接this.props.history.push("/my-order")
跳转打印下props:

以上并没有传任何参数,打印出来的都是原始数据,可以看出原始提供的参数并没有query,何谈query传参(网上各种没有实践就说query传参,刷新数据依然存在的不攻自破,当然了仅限于react-router-dom)
传参:
this.props.history.push({
pathname: "/my-order",
state: {
id: "123123"
}
})
取参:
this.props.location.state.id

但是,实际测试我传参时,无论传什么字段的参数过来都能拿到,下来将state更换为任意的字段比如传参用rocyuan替换state
this.props.history.push({
pathname: "/my-order",
rocyuan: {
id: "123123"
}
})

取参也就自然变成this.props.location.rocyuan.id
那在将rocyuan更换为query呢?那肯定和最开始的state是一模一样的。。。再次验证网上误导人的说react-router-dom中的query传参。刷新页面数据依然是会成为undefined
三、search传参
search就是query传参;刷新页面数据依旧存在
传参(1):
this.props.history.push({
pathname: "/my-order",
search: "?id=123"
})
传参(2):
this.props.history.push("/my-order?id=" + 123)
取参:
this.props.location.search
其实它取到的是search就是url后面的query,还需要处理:
// 封装的取url的query方法,返回的对象就是转换query的对象
getUrlQuery(search) {
const theRequest = new Object()
if (search.indexOf("?") != -1) {
const str = search.substr(1)
const strs = str.split("&")
for(let i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1])
}
}
return theRequest;
}
// 使用
const search = this.props.location.search;
const query = this.getUrlQuery(search);

9条评论
zorivareworilon
I have not checked in here for a while because I thought it was getting boring, but the last several posts are great quality so I guess I’ll add you back to my daily bloglist. You deserve it my friend 🙂
zorivare worilon
Rattling wonderful visual appeal on this website , I’d rate it 10 10.
hire a hacker to catch cheating spouse
Good write-up, I am regular visitor of one’s site, maintain up the nice operate, and It’s going to be a regular visitor for a lengthy time.
mj jacket
I am continually looking online for ideas that can facilitate me. Thanks!