react-router中的路由鈎子使用

在react項目中使用react-router的時候，經常遇到需要使用路由鈎子的情況。

路由鈎子的使用主要是兩種情況：

一是進入路由

二是離開路由

 

而路由鈎子的使用也有兩種情況。

注：本博客只適用於react-router v3版本

第一種：onEnter 和 onLeave

onEnter可以指定一個函數，它會在進入這個路由的時候執行這個函數

onLeave指定的函數會在離開路由的時候執行

const enterTab = () => {
  console.log('進入路由做一些事情，嘿嘿嘿')
}
const leaveTab = () => {
  console.log('要離開路由了')
}

<Router history={browserHistory}>
  <Route path='/' component={App}>
    <Route path='map' component={Map} onEnter={enterTab.bind(this)} onLeave={leaveTab.bind(this)}></Route>
  </Route>
</Router>

不過這種路由鈎子只能在定義路由的時候使用，要想在組件內部控制路由鈎子就需要第二種用法

第二種：react-router的內置高階組件withRouter

可以通過高階組件withRouter對當前組件進行‘升級’（給當前組件添加另外的props相當於混入mixin），withRouter會給當前組件一個props屬性router，而router有一個setRouteLeaveHook的方法，該方法可以設置當前路由的離開鈎子函數。

圖示：withRouter給組件添加的props屬性。根據該圖可以看出還能通過withRouter來控制路由的跳轉

示例代碼如下：

import {withRouter} from 'react-router'

class Test extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div></div>
    )
  }
  routerWillLeave(nextLocation) {
    console.log('router will go to '+nextlocation)       
    return 'confirm to leave ?' 
  }
  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.routes, this.routerWillLeave)
}
export default withRouter(Test)

setRouteLeaveHook函數接受兩個參數，第一個參數為要監聽判斷的路由，其應該是一個表示路由的對象，但是this.props.routes可能是有多個元素的數組。比如如果當前路由是 '/main/groups' 則this.props.routes就如下圖

所以在這種情況下，setRouteLeaveHook函數的第一個參數就應該寫成this.props.routes[1]才奏效

而該函數的第二個參數是離開所監測路由的時候要執行的函數，這個函數可以有三種返回值：

1. false 阻止路由跳轉
2. true 什么也不做，直接跳轉
3. 字符串，瀏覽器會彈出一個confirm確認框，確認框的內容是返回的字符串，點擊確定鍵后繼續跳轉路由，點擊取消則取消跳轉

 

小結：本文主要示范了react-router中路由鈎子的兩種用法，當然重點放在了第二種在組件內部使用的情況。

看看就好，只是做個記錄。