React跳转路由传参3种方法和区别
2024-08-30 17:26:54
1、params传参
路由表配置：参数地址栏显示
路由页面：<Route path='/demo/:id' component={Demo}></Route> //配置 /:id
路由跳转并传递参数：
链接方式：<Link to={'/demo/' + '2'}>XX</Link>
js方式：this.props.history.push('/demo/' + '2')
获取参数：this.props.match.params.id2、query传参
query方法：参数地址栏不显示，刷新地址栏，参数丢失
路由页面：<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数：
链接方式：<Link to={{path:'/demo',query:{name:'dahuang'}}}>XX</Link>
js方式：this.props.history.push({pathname:'/demo',query:{name:'dahuang'}})
获取参数： this.props.location.query.name3、state传参( 同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏)
state方法：参数地址栏不显示，刷新地址栏，参数不丢失
路由页面：<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数：
链接方式： <Link to={{path:'/demo',state:{name:'dahuang'}}}>XX</Link>
js方式：this.props.history.push({pathname:'/demo',state:{name:'dahuang'}})
获取参数： this.props.location.state.name
最新文章
- scp 上传文件到多个服务器节点
- HTML5安全：CORS（跨域资源共享）简介。。。ie67不要想了。。。
- JavaScript目录菜单滚动反显组件的实现
- poj2187 旋转卡(qia)壳(ke)
- 整理: Android HAL
- Windows7中Emacs 24 shell使用Gitbash
- Hibernate3.3 小记
- CentOS 安装jdk7
- iOS 9之New System Fonts(San Francisco 字体)
- 设计模式之适配器模式(Decorator)
- Webform中Repeater控件--绑定嵌入C#代码四种方式
- phpcms 模板常用标签指南
- [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路---部署
- mysql 数据库的设计三范式
- MQTT研究之EMQ：【EMQ之HTTP认证/访问控制】
- selenium+pyquery爬取淘宝美食100页（无头静默模式）
- 基于Thinkphp5.0 小程序登录插件应用
- Linux下C/C++代码调用PHP代码(转)
- 垂直方向兼容显示的内容多少的情况样式Flex布局
- 分布式唯一ID极简教程