博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React中路由传参及接收参数的方式
阅读量:6115 次
发布时间:2019-06-21

本文共 956 字,大约阅读时间需要 3 分钟。

注意:  
路由表改变后要重启服务  
   
方式 一
       
 通过params
        1.路由表中      
              <Route path=' /sort/:id '   component={Sort}></Route>
           
        2.Link处        
           
 HTML方式
                 <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>              
           
          
JS方式
                this.props.router.push(  '/sort/'+'2'  )
           
        3.sort页面       
               通过  this.props.params.id        就可以接受到传递过来的参数(id)
           
   
方式 二
         
通过query
                前提:必须由其他页面跳过来,参数才会被传递过来
        注:不需要配置路由表。路由表中的内容照常:<Route path='/sort' component={Sort}></Route>
        1.Link处      
        
 HTML方式
            <Link to={
{ path : ' /sort ' , query : { name : 'sunny' }}}>
          
       
JS方式
            this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })
 
        2.sort页面     
              this.props.location.query.name
                                
   
 方式 三
       
通过state
            同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏
        1.Link 处      
         
HTML方式
                <Link to={
{ path : ' /sort ' , state : { name : 'sunny' }}}> 
                                  
         JS方式
            this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })
                                  
        2.sort页面       
            this.props.location.state.name
                                  

转载于:https://www.cnblogs.com/waterFowl/p/8012096.html

你可能感兴趣的文章
使用FMDB最新v2.3版本教程
查看>>
SSIS从理论到实战,再到应用(3)----SSIS包的变量,约束,常用容器
查看>>
STM32启动过程--启动文件--分析
查看>>
垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
查看>>
淘宝的几个架构图
查看>>
Android扩展 - 拍照篇(Camera)
查看>>
JAVA数组的定义及用法
查看>>
充分利用HTML标签元素 – 简单的xtyle前端框架
查看>>
设计模式(十一):FACADE外观模式 -- 结构型模式
查看>>
iOS xcodebuile 自动编译打包ipa
查看>>
程序员眼中的 SQL Server-执行计划教会我如何创建索引?
查看>>
【BZOJ】1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路(floyd)
查看>>
cmake总结
查看>>
数据加密插件
查看>>
linux后台运行程序
查看>>
win7 vs2012/2013 编译boost 1.55
查看>>
IIS7如何显示详细错误信息
查看>>
ViewPager切换动画PageTransformer使用
查看>>
coco2d-x 基于视口的地图设计
查看>>
C++文件读写详解(ofstream,ifstream,fstream)
查看>>