React-router 要點

1.關於url中傳參的問題react

好比我想打開:react-router

/articles/detail/101

在url中要傳一個參數this

/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來實現頁面路由的跳轉url

在react-router中,兩種方法:spa

第一種,使用withRouter(),而後將在內部能夠獲取this.props.routercode

第二種,使用this.context.router.push('/'),不過在使用前必須定義這個類的contextTypescomponent

 

withRouter怎麼用?router

import React from 'react'
import {withRouter} from 'react-router'

class App extends React.Component {
  ...
  this.props.router.push('/')        
}

export default withRouter(App)

用context怎麼用呢?blog

...
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路由

相關文章
相關標籤/搜索