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  (在於可以給當前選中的路由添加樣式)

react-Router-dom的使用