react-router小笔记

看了react-router-tutorial，轻松入门了react-router

1、如何使用react-router

import { Router, Route, hashHistory } from 'react-router'

// render(<App/>, document.getElementById('app'))
// Router也是一个组件
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'))

2、如何传参并获取参数

// 定义路由
 <Route path="/repos/:userName/:repoName" component={Repo}/>
     
// 按照格式传参
<li><Link to="/repos/facebook/react">React</Link></li>
    
// 获取
{this.props.params.repoName}   

3、编程式路由

• 编程时导航的两种方式

  方式一：

  // modules/Repos.js
  import { browserHistory } from 'react-router'
  
  // ...
    handleSubmit(event) {
      // ...
      const path = `/repos/${userName}/${repo}`
      browserHistory.push(path)
    },
  // ...
  

  方式二：更通用

  export default React.createClass({
  
    // ask for `router` from context
    contextTypes: {
      router: React.PropTypes.object
    },
  
    // ...
  
    handleSubmit(event) {
      // ...
      this.context.router.push(path)
    },
  
    // ..
  })
  

• 编程式路由如何传参并获取参数值

  同上