react-router

 參考demo https://github.com/yangstar/react-router-demo.git，若是以爲對你有幫助，請star一下~

• 路由配置

路由配置三要素：

1. 一個包含this.props.children的父組件
2. 一個子組件
3. Route配置

進入和離開hook：

1. onEnter（可作登陸攔截）
2. onLeave

配置方式

1. jsx嵌套
2. 原生route數組對象

• 路由匹配規則

• 跳轉

1. 正常跳轉Link 
2. 點擊表單，點擊按鈕跳轉

　　　　方法一： browserHistory.push('url') 

　　　　方法二：context對象（ps：es5與es6）

• History ：

 　　一個 history 知道如何去監聽瀏覽器地址欄的變化， 並解析這個 URL 轉化 爲 location 對象， 而後 router 使用它匹配到路由，最後正確地渲染對應的組 件

1.  browserHistory（推薦使用）
2.  hashHistory（不推薦使用） 

• 默認路由IndexRoute 和 IndexLink 

　　IndexLink適用於根路徑跳轉

• 結合webpack使用

　　做用：代碼拆分 

　　代碼對比

  

• react-router傳參

點擊表單或按鈕跳轉

<form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="userName"/>
  <input type="text" placeholder="repo"/>
  <button type="submit">Go</button>
</form>

第一種方法是使用browserHistory.push

import { browserHistory } from 'react-router'

// ...
  handleSubmit(event) {
    event.preventDefault()
    const userName = event.target.elements[0].value
    const repo = event.target.elements[1].value
    const path = `/repos/${userName}/${repo}`
    browserHistory.push(path)
  },

第二種方法是使用context對象

es5寫法

export default React.createClass({

  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },

  handleSubmit(event) {
    // ...
    this.context.router.push(path)   // 無參數
    this.context.router.push({pathname: path, state: {}})   // 有參數
  },
})

 

es寫法

import React from 'react';
// import PropTypes from 'prop-types' 或者單獨引入prop-types
import { browserHistory  } from 'react-router'

class About extends React.Component{
    constructor(props, context) {
        super(props, context);

        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit () {
        // browserHistory.push('/');
        this.context.router.push('/')
    }
   
    render () {
        return (
            <div>
                <input type="button" value="提交" onClick={this.handleSubmit}/>
            </div>          
        )
    }
}
About.contextTypes = {
    router: React.PropTypes.object
}
export default About

獲取參數

// 獲取參數
componentDidMount() {
  this.setState({
     params: this.props.location.state.params
  })
}

 

方法三

// 配置參數
<Route path="newDetail/:id" component={NewDetail}></Route>

 

// 獲取參數
class NewDetail extends React.Component {
    constructor(props) {
        super(props);
    }

    render () {
        return (
            <div>
                {this.props.params.id}
            </div>
        )
    }
}
export default NewDetail