利用React-router进行传值
下面总结的路由传参方式都是基于
react-router v5
版本
- query
query
方式类似于表单中的get
方法,传递参数为明文:
// 定义路由(普通定义)
<Route
exact
path='/home'
component={asyncLoad(() =>
import(
/* webpackChunkName:"../pages/home/index" */
'../pages/home/index'
)
)}
/>
// 传参
this.props.history.push({
pathname: '/select',
query: {userTaskId: userTaskId},
});
// 使用
let {location} = this.props.history;
console.log(location.query.userTaskId)
- state
state
方式类似于post
方式,和query
类似:
// 定义路由(普通定义)
<Route
exact
path='/home'
component={asyncLoad(() =>
import(
/* webpackChunkName:"../pages/home/index" */
'../pages/home/index'
)
)}
/>
// 传参
this.props.history.push({
pathname: '/select',
state: {userTaskId: userTaskId},
});
// 使用
let {location} = this.props.history;
console.log(location.state.userTaskId)
- props.params
props.params
方式是指定一个格式的path
,然后指定通配符可以携带参数到指定的path
:
// 定义路由(定义必传的字段名)
<Route
exact
path='/report/:userTaskId'
component={asyncLoad(() =>
import(
/* webpackChunkName:"../pages/report/index" */
'../pages/report/index'
)
)}
/>
// 传参
this.props.history.push({
pathname: `/select/${userTaskId}`
});
// 使用
let {params} = this.props.match;
console.log(params.userTaskId)
利用URL的search进行传值
上面几种方式中query
和state
的方式值都是存在内存中的,一旦刷新页面数据就没了,这样肯定是不利于查看页面数据的。那除了利用props.params
这种方式将参数持久化存在url
中,还有没有别的方式呢?
答案肯定是有的,在不利用react-router
的方法在页面间传递参数的情况下,可以用url
的search
传递:
http://webapp.leke.cn/leke-ai-pad/#/operation?age=1
不过需要注意的是,这种方式传值时因为是放在hash
后面的,直接用location.search
是获取不到?
后面的search
参数的,需要取得hash
值之后截取。然后我们需要传递一个JSON
对象时要先转码,再解码,因为可能有中文,要保持编码一致性。
用search
传递数据时需要用工具类进行解析,将string
转为object
来使用,我们可以用网上比较成熟的库如qs
也可以用自己封装的工具方法:
/*serach参数转为对象*/
export const urlToObj = function(url) {
var reg_url = /^[^\?]+\?([\w\W]+)$/,
reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
arr_url = reg_url.exec(url),
ret = {};
if (arr_url && arr_url[1]) {
var str_para = arr_url[1],
result;
while ((result = reg_para.exec(str_para)) != null) {
ret[result[1]] = result[2];
}
}
return ret;
};
利用localStorage和sessionStorage进行传值
这种主要对于传递比较大的数据时,因为URL
长度有限制(谷歌浏览器是8182个字符),所以对于字符数较多的用浏览器的本地存储会比较安全,不同浏览器容量不同,最低也比URL大一些的。