React router 4 获取路由参数,跨页面参数

1. match通过路径

<Route path="/path/:name" component={example} />

路由组件内获取参数使用

this.props.match.params.name

2. query String 通过search

//mirrorx中使用push的参数search,link中使用与此类似
actions.routing.push({
  pathname: ‘/path/example‘,
  search: `?name={name}`,
 }
)

路由组件内获取参数使用

this.props.location.search

是个字符串,可以使用querySrirng方法来获取指定参数

原来this.props.location.query.name这种方式在v4版本中不再可用,老版本获取参数方式

原文地址:https://www.cnblogs.com/mengff/p/9764617.html

时间: 2024-11-01 23:06:30

React router 4 获取路由参数,跨页面参数的相关文章

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

react router路由传参

今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下. 1.通配符传参 Route定义方式: <Route path='/path/:name' component={Path}/> Link组件: <Link to="/path/通过通配符传参">通配符</Link> 参数获取: th

vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu

【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.React Router 4.0核心概念 4.0版本中已不需要路由配置,一切皆组件 react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 react-router-dom:基于浏览器的路由(包含react-router) 提供了

AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 项目文件结构 node_modules/ public/.....app/..........bower_components/...............toastr/....................toastr.min.css....................toastr.min

vue 路由的作用,页面有参数和无参数跳转

无参数跳转: 使用路由标签跳转: 通过路由路径跳转: <router-link :to="{path:'/fruit/apple'}">apple</router-link> 此时的path就是注册路由时的path,也就是路由的路径. 可以简写为. <router-link to="/fruit/apple">apple</router-link> 通过路由名称跳转: <router-link :to="

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象const accessedRouters = asyncRouterMap.filter(route => { if (route.component) { if (route.component === 'Layout') {//Layout组件特殊处理 route.component = Layou

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

如何在Silverlight应用程序中获取ASP.NET页面参数

asp.net Silverlight应用程序中获取载体aspx页面参数 有时候SL应用中需要使用由aspx页面中传递过来的参数值,此时通常有两种方法获取 1. 使用InitParameters属性,动态设置传递参数 . 2. 在SL工程中使用HtmlPage类来直接获取页面参数. 如下面的项目结构,我们会在Default.aspx页面中需要传递两个值到SilverlightTestPage.aspx页面,并且需要在SilverlightTestPage.aspx页面所宿主的Silverligh