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> ) }}在這個組件中，當路由變動，我們都能實時監聽，獲取路由來改變title
總結
利用react-router 4一切皆組件的特性和生命周期函數來監聽路由變動
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
