react-router-v4 路由监听

发表于 | 分类于

在使用react的时候，会有需要监听react-router路由变化的需求，针对特殊路由进行处理等。

  • 一种方案是将所有的路由组件都放在一个父组件里面，然后通过父组件的 this.props.location.pathname 进行手动获取。
  • 如果结合redux存储的话可以使用 react-redux-router这个库。

最直接的方案是 使用 history 对象，react-router 也是基于这个 history 库实现的。

引入history库并实例化history对象，添加监听方法，然后传入到 的history属性中。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import ReactDOM from 'react-dom';
import createHashHistory from "history/createHashHistory"
import {
  Router,
  Route,
  Link,
  Switch
} from 'react-router-dom';

const history = createHashHistory()

history.listen((location, action) => {
  console.log(
    `The current URL is ${location.pathname}${location.search}${location.hash}`
  )
  console.log(`The last navigation action was ${action}`)
})

ReactDOM.render(
  <Router history={history}>
    <div>
      <App />
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>, document.getElementById('root'));
registerServiceWorker();