详解react如何在组件中获取路由参数


Posted in Javascript onJune 15, 2017

路由参数

假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?

这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。

import List from './component/list';

<Route path="list/:id" component={List} />

注意 path 属性中的 :id 就是该路由的参数( param )。再来看看 List 页面的组件。

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <div>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: 'red'}}>{this.props.params.id}</b>
 </p>
 </div>
 );
 }
};
export default List;

在 List 组件中,可以直接通过 this.props.params.id 来访问实际的参数值(这里的id key 就和定义路径的 :id 相对应),React Router 将路由的数据都通过 props传递给了页面组件,这样就可以非常方便的访问路由相关的数据了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
了解javascript中的Dom操作
May 27 Javascript
react-router JS 控制路由跳转实例
Jun 15 #Javascript
Vue路由跳转问题记录详解
Jun 15 #Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 #Javascript
package.json文件配置详解
Jun 15 #Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 #Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 #Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
对象的类型:本地对象(1)
2006/12/29 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python实现名片管理器的示例代码
2019/12/17 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
C语言笔试题回忆
2015/04/02 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
英语老师推荐信
2014/02/26 职场文书
会计人员岗位职责
2014/03/19 职场文书
仓库规划计划书
2014/04/28 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书