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