React项目页面之间的传值方式

7,736 阅读1分钟

利用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进行传值

上面几种方式中querystate的方式值都是存在内存中的,一旦刷新页面数据就没了,这样肯定是不利于查看页面数据的。那除了利用props.params这种方式将参数持久化存在url中,还有没有别的方式呢?

答案肯定是有的,在不利用react-router的方法在页面间传递参数的情况下,可以用urlsearch传递:

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

参考: