详解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实现轮播效果组件示例代码
前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req
-
深入理解React中es6创建组件this的方法
首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component
-
React进阶学习之组件的解耦之道
前言 众所周知,React中的组件非常的灵活可扩展,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得浮肿,接下来我们就一起来看看常见的几种,遵循单一职责原则的,组件分割与解耦的方法,话不多说了,来一起看看详细的介绍: 一.分割 render 函数 当一个组件渲染的内容较多时,有一个快速并且通用的方法是创建sub-render函数来简化原来庞大的 render class Panel extends React.Component { renderHeading() { // ..
-
React组件的三种写法总结
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模
-
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. 无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件
-
详解react如何在组件中获取路由参数
路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li
-
Laravel中获取路由参数Route Parameters的五种方法示例
前言 大家都知道Laravel 获取路由参数的方式有很多,并且有个小坑,现汇总如下,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 假设我们设置了一个路由参数: /** * 定义路由参数名称分别为: param1,param2 */ Route::get('/{param1}/{param2}', 'TestController@index'); 现在我们访问 http://test.dev/1/2 在 TestController 中: /** * 路由参数获取方法 * *
-
详解React之父子组件传递和其它一些要点
react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 react主要思想是构建可复用组件来构建用户界面.在react里面一切皆组件.每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行.下面附上一张React的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件
-
详解React中共享组件逻辑的三种方式
废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return
-
react四种组件中DOM样式设置方式详解
1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件中 注意:这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 2.使用class React推荐我们使用行内样式,因为React觉得每一个组件都是一
-
详解React中key的作用
要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =
-
详解React中的不可变值
什么是不可变值 函数式编程是指程序里面的函数和表达式都能像数学中的函数一样,给定了输入值,输出是确定的.比如 let a = 1; let b = a + 1; => a = 1 b = 2; 变量b出现,虽然使用了变量a的值,但是没有修改a的值. 再看我们熟悉的react中的代码,假如初始化了this.state = { count: 1 } componentDidMount() { const newState = { ...state, count: 2 }; // { count: 2
-
详解React 16 中的异常处理
详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致
-
详解react组件通讯方式(多种)
1.父组件向子组件传值 父组件向子组件传值一般采用props属性传递 父组件: import React from 'react' import Child from './Child' const dataList = [ { id: '001', value: '张三' }, { id: '002', value: '李四' } ] const Parent = props => { return ( <ul> <Child dataList={dataList}><
-
详解React 父组件和子组件的数据传输
在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi
随机推荐
- 详细介绍 进程、线程和协程的区别
- angularjs利用directive实现移动端自定义软键盘的示例
- JavaScript创建对象的写法
- 一个即时表单验证的javascript代码
- JavaScript 巧学巧用
- BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
- 浅析Java中的GC垃圾回收器的意义及与GC的交互
- 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
- 十幅图告诉你什么是PHP引用
- asp alexa查询小偷程序
- JSON 数字排序多字段排序介绍
- CSS经典技巧十则第1/2页
- 浅析JavaScript 调试方法和技巧
- 令按钮悬浮在(手机)页面底部的实现方法
- MongoDB性能优化及监控
- jquery简单实现外部链接用新窗口打开的方法
- jquery datatable服务端分页
- 移动节点的jquery代码
- js判断背景图片是否加载成功使用img的width实现
- 阿里云云服务器Windows 2008下IIS添加网站绑定域名图文教程