快捷導(dǎo)航

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

更新時(shí)間：2018年08月07日 10:07:43 作者：qianq

這篇文章主要介紹了React-router4路由監(jiān)聽的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

React-router 4

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

問題出發(fā)點(diǎn)

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

思路

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

項(xiàng)目目錄結(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>
          ...
          項(xiàng)目一級路由
          ...
        </Switch>
      </div>
    )
  }
}

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

總結(jié)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

react?redux及redux持久化示例詳解
這篇文章主要為大家介紹了react?redux及redux持久化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
react實(shí)現(xiàn)Modal彈窗效果
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)Modal彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender
2022-10-10
React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼
這篇文章主要介紹了React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
一文帶你搞懂react hooks的類型聲明
這篇文章主要給帶大家搞清楚react hooks的類型聲明，如果有同學(xué)還不清楚react hooks的類型聲明，來看本文就對了，文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
詳解React項(xiàng)目的服務(wù)端渲染改造(koa2+webpack3.11)
本篇文章主要介紹了詳解React項(xiàng)目的服務(wù)端渲染改造(koa2+webpack3.11)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
react中Hooks的理解和用法小結(jié)
Hook是 React 16.8 的新增特性，它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了react中Hooks的理解和用法,需要的朋友可以參考下
2023-05-05
詳解React 服務(wù)端渲染方案完美的解決方案
這篇文章主要介紹了詳解React 服務(wù)端渲染方案完美的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12