详解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 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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实现支付宝小程序用户授权的工具类
2018/12/25 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript代码加载优化方法
2011/01/30 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python中的类学习笔记
2014/09/23 Python
python使用7z解压apk包的方法
2015/04/18 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
公司同意接收函
2014/01/13 职场文书
服务宗旨标语
2014/07/01 职场文书
结对共建协议书
2014/08/20 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
药店收银员岗位职责
2015/04/07 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android