React路由跳转传值方式

路由跳转传值的方式:

1.params 方式:直接将需要传递的值以/形式继续拼接在url地址的后面;(少用,除了接口中存在此情况)

        特点:

        1.1需要配置路由;

        1.2刷新网页,值依然存在;

        1.3不能直接传递对象类型,除非把对象转化成JSON字符串的形式;

在pages组件中

 

在组件中

 

2.query 方式,to属性的属性值不再是一个字符串,而是一个对象;通过pathname这个属性,跳转地址;

        特点:

        2.1 不需要配置路由;

        2.2 刷新网页,值被销毁

        2.3 可以传对象以及数组;

在pages组件中

React路由跳转传值方式_第1张图片

 

在组件中

 

3.state 方式,传值方式与query类似;(最常用)

        特点:

        3.1 不需要配置路由;

        3.2 刷新网页,值不被销毁

        3.3 可以传对象以及数组;

在pages组件中

React路由跳转传值方式_第2张图片

 

在组件中

你可能感兴趣的:(react.js,javascript,前端)