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

更新时间：2017年06月15日 11:53:04 作者：沈斯明

这篇文章主要介绍了详解react如何在组件中获取路由参数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

路由参数

假如我们有很多 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传递给了页面组件，这样就可以非常方便的访问路由相关的数据了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React less 实现纵横柱状图示例详解
这篇文章主要介绍了React less 实现纵横柱状图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
React深入分析useEffect源码
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
2022-11-11
在React框架中实现一些AngularJS中ng指令的例子
这篇文章主要介绍了在JavaScript的React框架中实现一些AngularJS指令的例子,React使用Virtual DOM因而与普通的js框架有些不同,需要的朋友可以参考下
2016-03-03
react-router4 配合webpack require.ensure 实现异步加载的示例
本篇文章主要介绍了react-router4 配合webpack require.ensure 实现异步加载的示例，非常具有实用价值，需要的朋友可以参考下
2018-01-01
react框架next.js学习之API 路由篇详解
这篇文章主要为大家介绍了react框架next.js学习之API 路由篇详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react中的forwardRef 和memo的区别解析
forwardRef和memo是React中用于性能优化和组件复用的两个高阶函数,本文给大家介绍react中的forwardRef 和memo的区别及适用场景,感兴趣的朋友跟随小编一起看看吧
2023-10-10
react app rewrited替代品craco使用示例
这篇文章主要为大家介绍了react app rewrited替代品craco使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
详解Ref在React中的交叉用法
众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西
2021-06-06
重新理解 React useRef原理
这篇文章主要为大家介绍了React useRef原理的深入理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
TS装饰器bindThis优雅实现React类组件中this绑定
这篇文章主要为大家介绍了TS装饰器bindThis优雅实现React类组件中this绑定，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11