React-router 要点
1.关于url中传参的问题
比如我想打开:
/articles/detail/101
在url中要传一个参数
/articles/detail/:articleId
路由中:
<Route path="/articles/detail/:articleId" component={ArticleDetail}/> Link中:
<Link to="/article/detail/101">文章</Link> 如何在页面中取到参数
<div>{this.props.params.articleId}</div>
2.如何用js来实现页面路由的跳转
在react-router中,两种方法:
第一种,使用withRouter(),然后将在内部可以获取this.props.router
第二种,使用this.context.router.push('/'),不过在使用前必须定义这个类的contextTypes
withRouter怎么用?
import React from 'react'
import {withRouter} from 'react-router' class App extends React.Component {
...
this.props.router.push('/')
} export default withRouter(App)
用context怎么用呢?
...
export default class App extends React.Component {
...
this.context.router.push('/')
}
App.contextTypes = {
router: React.PropsTypes.object
} //等同于下面的写法 ...
export default React.createClass({
contextTypes: {
router: React.PropsTypes.object
}
...
this.context.router.push('/')
...
})
转自 http://www.jianshu.com/p/0e54c6b6ab2b 作者 JasonFF
React-router 要点的更多相关文章
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
随机推荐
- 调用AutoCAD的内置对话框
如何将CAD的内置对话框(如style命令所用的文字样式对话框)作为当前对话框的子对话框调出? 常用的几个对话框对应的函数为:1.尺寸标注样式编辑对话框:int acedEditDimstyleInt ...
- 高级I/O之异步I/O
A synchronous I/O operation causes the requesting process to be blocked until that I/O operation com ...
- 《C和指针》之ANSI C标准输入输出函数
一.I/O流操作一般流程: (1)为每一个要打开的文件定义一个FILE *类型的指针变量,这个指针变量将指向I/O流使用的FILE结构体. (2)使用fopen函数打开I/O流.要打开一个I/O流,必 ...
- sizeWithFont 不是线程安全。
在ios开发中经常使用用sizeWithFont 方法来计算UILabel 的frame, 例如动态计算UITableViewCell 的高度,在主线程处理没有问题,但是在子线程用此方法来计算就会出现 ...
- 批处理DataTable
DataTable dt = CreateTable(); SqlConnection conn = new SqlConnection("Data Source=.;Initial Cat ...
- 在SSIS 的 64 位版本中不支持 Excel 连接管理器
Microsoft sql server 2008 R2——> SQL SERVER Business Intelligence Development Studio 使用EXCEL数据源或目标 ...
- The Signals Of Process Communication
在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...
- poj 3544 Journey with Pigs
Journey with Pigs Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3004 Accepted: 922 ...
- 是时候全面使用html5标签了
html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...
- Jersey(1.19.1) - Client API, Proxy Configuration
为 Jersey Client 设置代理,可以使用带有 ClientHandler 参数的构造方法创建 Client 实例. public static void main(String[] args ...