react-router @4用法整理

router@4

react-router@4官方文檔
github源碼

這篇文章主要介紹了react-router@4的基本用法,包括動態路由,編程式導航等

1. 安裝
2. switch用法
3. 動態路由的基本用法
4. 編程式導航(withRouter)
5. 總結

1. 安裝

   npm i react-router-dom -S

2. switch用法
   示例代碼:

import { Switch, BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
class SwitchCom extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/cart" component={Cart}></Route>
                    <Route path="/search" component={Search} />
                    <Route path="/home" component={Main} />
                    <Redirect from="/" to="/home"></Redirect>           
                    <Route path="/mine" component={Mine}></Route>
                    <Route path="/class" component={Class}></Route>
                    <Route component={NoMatch}></Route>
                </Switch>
            </Router>
        )
    }
}

關於路由重定向: 使用Redirect..from..to的格式,注意位置須要在定義to路由的後面,好比to="/home",重定向就須要寫在Route path="/home" 後面
關於404路由匹配,默認寫在路由末尾,前面的路由都不匹配時,自動匹配404
關於Route,必須寫在Router標籤裏面,不然會報錯

3.動態路由的基本用法:

import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom';
<div className="tab-bar">
    <Route path="/index" exact component={Index}></Route>
    <Route path="/index/news" component={News}></Route>
    <Route path="/index/course" component={Course}></Route>
    <Route path="/index/mine" component={Mine}></Route>
    <ul className="footer">
        <li><NavLink exact to="/index" activeStyle={{ color: '#4dc060' }}>首頁列表項目 </NavLink></li>
        <li><NavLink to="/index/news" activeStyle={{ color: '#4dc060' }}>資訊</NavLink></li>
        <li><NavLink to="/index/course" activeStyle={{ color: '#4dc060' }}>課程</NavLink></li>
        <li><NavLink to="/index/mine" activeClassName="selected">個人</NavLink></li>
    </ul>
</div>

上面的exact表示絕對匹配/index,若是不註明exact,則/index還會匹配/index/new等等
上面代碼實現了一個相似tabbar切換的效果

關於NavLink 和 Link:
若是僅僅須要匹配路由,使用Link就能夠了,而NavLink的不一樣在於能夠給當前選中的路由添加樣式, 好比上面寫到的activeStyle和activeClassName

4.編程式導航(withRouter用法)

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以後,就可使用編程式導航進行點擊跳轉, 須要注意的是export default的暴露如上面所寫,若是結合redux使用,則暴露方式爲: withRouter(connect(...)(MyComponent))
調用history的goBack方法會返回上一歷史記錄
調用history的push方法會跳轉到目標頁,如上面goDetail方法
跳轉傳參: push()能夠接收一個對象參數,跳轉以後,經過this.props.location.state接收

5 總結:
剛作過一個React的項目,搭配路由選擇了react-router @4 ,收穫挺多的,打算寫文章記錄一下收穫(也算是遇到的一些坑). 感受@4比以前的router版本更加靈活一些,用法也更加簡潔.仍是挺好用的.官方文檔也只是用到哪些就看一看,並無從頭看到尾,因此理解還不是很深入,若是上面理解有誤差,還望指出,共同進步.