react路由跳转传参

1.引入插件

import { useHistory } from 'react-router'

2. query/state传递参数，刷新参数丢失

传递参数

export default (props) => {const history = useHistory()......<a key="routerTo" onClick={() => {history.push({pathname: '/detail',query: { //query也可以改成statedictCode:765},})}}>进入详情</a>
}

接收参数，

export default (props) => {const history = useHistory()......useEffect(() => {//query也可以改成stateconsole.log(history.location.query) // {dictCode:765}// 注意！当刷新页面获取的参数就为空了。}, [])
}

3. search传递参数，刷新参数还在

传递参数

export default (props) => {const history = useHistory()......<a key="routerTo" onClick={() => {history.push({pathname: '/detail',search: '?dictCode=765'，//search:`?${encodeURI(JSON.stringify(record))}` 如果传递的是对象，需要对对象进行url编码不然解码会报错})}}>进入详情</a>
}

接收参数，

export default (props) => {const history = useHistory()......useEffect(() => {let routerData = location.hash.split('?')[1]console.log(routerData) // 'dictCode=IsInfo'//console.log(JSON.parse(decodeURI(routerData)))对象解码// 注意！当刷新页面获取的参数还在}, [])
}

react路由跳转传参相关推荐

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue路由跳转传参乱码解决
vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
id vue2路由传参_vue 路由跳转传参
正常跳转 this.$router.push('/index'); 1带参 toOrderDetail() { let orderUuid = this.order.uuid; this.$route ...
vue3路由配置及路由跳转传参
1.安装路由 npm i vue-router 2.编写需要展示的路由在src目录下创建pages文件夹,里面创建两个vue文件命名为student.vue,person.vue 分别编写两个vue ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
VUE路由跳转传参的七种方法
vue中每个页面都需要在路由中声明,就是在router/index.js中写 import Vue from 'vue' import Router from 'vue-router' import ...
vue路由跳转传参的几种方式
需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout'const repairRouter = {path: '/repair',co ...
vue路由跳转传参 Orz
好困好困好困常用路由跳转方式通过router-link进行跳转通过$router.push进行跳转 router-link <router-link :to="{path: 'y ...

react路由跳转传参

1.引入插件

2. query/state传递参数，刷新参数丢失

3. search传递参数，刷新参数还在

react路由跳转传参相关推荐

最新文章

热门文章