React-router4路由監(jiān)聽的實現(xiàn)

React-router 4

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

問題出發(fā)點

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

思路

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

項目目錄結(jié)構(gòu)

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>
 )
 }
}

在這個組件中，當(dāng)路由變動，我們都能實時監(jiān)聽，獲取路由來改變title

總結(jié)

利用react-router 4一切皆組件的特性和生命周期函數(shù)來監(jiān)聽路由變動

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com