react-Router-dom的使用

react-Router-dom的使用

1. react-router提供了一個wthRouter組件

特色：
1. withRouter能夠包裹任何自定義組件
2. 將react-router的history、location、match三個對象傳入

import {withRouter} from 'react-router-dom';

goBack(){
    this.props.history.goBack();
}  
goDetail(){
    this.props.history.push('/detail');
}  
goDetailWithParam(item){
    this.props.history.push({pathname : '/cart',state:{item}});
}
    
<span className="ico" onClick={this.goBack.bind(this)}>
    <i className="iconfont">&#xe501;</i>
</span>
//這裏的item來自for循環的每一項
<li onClick={this.goDetailWithParam.bind(this,item)} key={encodeURI(item.imgUrl)}>

export default withRouter(Header);

引入withRouter以後,就可使用編程式導航進行點擊跳轉

若是結合redux使用,則暴露方式爲: withRouter(connect(...)(MyComponent))

調用history的goBack方法會返回上一歷史記錄

調用history的push方法會跳轉到目標頁,如上面goDetail方法

跳轉傳參: push()能夠接收一個對象參數,跳轉以後,經過this.props.location.state接收

2. 關於路由重定向

使用Redirect..from ..to的格式

須要注意定義 to路由的後面好比 to="/home"，

重定向就須要寫在 Route path="/home"的後面

3. 404路由的匹配

默認寫在路由的末尾，當前面的路由都不匹配時，自動匹配404路由

4. route組件的使用

必須寫在Router別名的HashRouter組件或者BrowserRouter組件

5. 關於NavLink和Link的用法

若是單純的實現跳轉就用 link

須要添加樣式的那麼就用 NavLink  (在於能夠給當前選中的路由添加樣式)