使用React-router4怎么實現路由監聽

本篇文章給大家分享的是有關使用React-router4怎么實現路由監聽，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

React-router 4

React Router4是一個純React重寫的包，現在的版本中已不需要路由配置，一切皆組件。

問題出發點

最近在一個新的H5項目中使用了react router 4 ("react-router-dom": "^4.2.2")，項目中的一部分頁面是需要給app客戶端的同學使用，這樣H5項目中的title就不能一成不變，需要顯示對應頁面的title，所以，我們就需要去監聽路由變動來更改title。

思路

在react中，例如：在父路由中有兩個子路由，兩個子路由組件的內容都屬于父路由中的一部分，通過切換子路由來顯示不同內容，這種情況下，父組件中的生命周期函數componentWillUpdate都會在切換子路由時被觸發。按照這個思路結合react-router 4一切皆組件的特性，我們可以用一個IndexPage組件來放置所有的一級路由（其他多級路由就可以放到對應一級路由組件中），當我們切換路由是，就可以在這個IndexPage組件中實時監聽路由的變動了。

項目目錄結構

src/app.js

...
export default class App extends Component {
  render() {
    return (
      <Router>
        <Route path="/" component={IndexPage}/>
      </Router>
    )
  }
}

src/pages/index.js

...
export default class IndexPage extends Component {
  componentDidMount() {
    this.updateTitle(this.props);
  }

  componentWillUpdate(nextProps) {
    this.updateTitle(nextProps);
  }

  updateTitle = (props) => {
    routes.forEach(route => {
        if (route.path === props.location.pathname) {
          document.title = route.title;
        }
    })
  }
  render() {
    return (
      <div className="index-page">
        <Switch>
          ...
          項目一級路由
          ...
        </Switch>
      </div>
    )
  }
}

以上就是使用React-router4怎么實現路由監聽，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。