利用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大一些的。
