React-router 4路由監聽

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一切皆組件的特性和生命週期函數來監聽路由變更