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 要点的更多相关文章

  1. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  2. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  3. [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 ...

  4. [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 ...

  5. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  6. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  8. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  9. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  10. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

随机推荐

  1. 调用AutoCAD的内置对话框

    如何将CAD的内置对话框(如style命令所用的文字样式对话框)作为当前对话框的子对话框调出? 常用的几个对话框对应的函数为:1.尺寸标注样式编辑对话框:int acedEditDimstyleInt ...

  2. 高级I/O之异步I/O

    A synchronous I/O operation causes the requesting process to be blocked until that I/O operation com ...

  3. 《C和指针》之ANSI C标准输入输出函数

    一.I/O流操作一般流程: (1)为每一个要打开的文件定义一个FILE *类型的指针变量,这个指针变量将指向I/O流使用的FILE结构体. (2)使用fopen函数打开I/O流.要打开一个I/O流,必 ...

  4. sizeWithFont 不是线程安全。

    在ios开发中经常使用用sizeWithFont 方法来计算UILabel 的frame, 例如动态计算UITableViewCell 的高度,在主线程处理没有问题,但是在子线程用此方法来计算就会出现 ...

  5. 批处理DataTable

    DataTable dt = CreateTable(); SqlConnection conn = new SqlConnection("Data Source=.;Initial Cat ...

  6. 在SSIS 的 64 位版本中不支持 Excel 连接管理器

    Microsoft sql server 2008 R2——> SQL SERVER Business Intelligence Development Studio 使用EXCEL数据源或目标 ...

  7. The Signals Of Process Communication

    在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...

  8. poj 3544 Journey with Pigs

    Journey with Pigs Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3004   Accepted: 922 ...

  9. 是时候全面使用html5标签了

    html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...

  10. Jersey(1.19.1) - Client API, Proxy Configuration

    为 Jersey Client 设置代理,可以使用带有 ClientHandler 参数的构造方法创建 Client 实例. public static void main(String[] args ...