成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于React動態(tài)加載路由處理！

zeyu / 3267人閱讀

摘要：前言相信很多人都遇到過想在項目中動態(tài)加載路由這種問題，接下來我們逐步實現(xiàn)。首頁未定義未定義施工中個人助理待辦事項已辦事項系統(tǒng)消息系統(tǒng)消息詳情從代碼中可以看出已經(jīng)實現(xiàn)了的的引入，這樣自然就可以通過一個循環(huán)來實現(xiàn)動態(tài)的加載啦

前言 
相信很多人都遇到過想在React項目中動態(tài)加載路由這種問題，接下來我們逐步實現(xiàn)。
引入必要的依賴 
import React from "react"
import { Router, Route, IndexRoute, hashHistory } from "react-router"
接下來創(chuàng)建一個component函數(shù)

目的就是為了變?yōu)閞outer的component實現(xiàn)異步加載。

// 異步按需加載component
function asyncComponent(getComponent) {
    return class AsyncComponent extends React.Component {
      static Component = null;
      state = { Component: AsyncComponent.Component };
  
      componentDidMount() {
        if (!this.state.Component) {
          getComponent().then(({default: Component}) => {
            AsyncComponent.Component = Component
            this.setState({ Component })
          })
        }
      }
      //組件將被卸載  
    componentWillUnmount(){ 
        //重寫組件的setState方法，直接返回空
        this.setState = (state,callback)=>{
            return;
        };  
    }
      render() {
        const { Component } = this.state
        if (Component) {
          return 
        }
        return null
      }
    }
  }

在此說明componentWillUnmount鉤子是為了解決Can only update a mounted or mounting component的這個問題，原因是當(dāng)離開頁面以后，組件已經(jīng)被卸載，執(zhí)行setState時無法找到渲染組件。

接下來實現(xiàn)本地文件路徑的傳入 
 function load(component) {
    return import(`./routes/${component}`)
  }

將已知地址路徑傳遞到一個函數(shù)并把這個函數(shù)作為參數(shù)傳遞到 asyncComponent中這樣asyncComponent就能接收到這個路由的地址了，然后我們要做的就是將這個asyncComponent函數(shù)帶入到router中。


        
             
未定義
}/>
            
             
{children}
}>
                 load("GlobalNotification/CustomerWorkAssistantTodo/CustomerAgencyMatter"))}/>
                 load("GlobalNotification/CustomerWorkAssistantTodo/CustomerAlreadyMatter"))}/>
                 load("GlobalNotification/SystemMessage/SystemMessage"))}/>
                 load("GlobalNotification/SystemMessage/SystemMessagePer"))}/>

從代碼中可以看出已經(jīng)實現(xiàn)了router 的component 的引入，這樣自然就可以通過一個循環(huán)來實現(xiàn)動態(tài)的加載啦！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100783.html

相關(guān)文章

  • 前端插拔式 SPA 應(yīng)用架構(gòu)實現(xiàn)方案

    摘要：插拔式應(yīng)用架構(gòu)方案和傳統(tǒng)前端架構(gòu)相比有以下幾個優(yōu)勢業(yè)務(wù)模塊分布式開發(fā)，代碼倉庫更易管理。 showImg(https://segmentfault.com/img/remote/1460000016053325?w=2250&h=1500); 背景 隨著互聯(lián)網(wǎng)云的興起，一種將多個不同的服務(wù)集中在一個大平臺上統(tǒng)一對外開放的概念逐漸為人熟知，越來越多與云相關(guān)或不相關(guān)的中后臺管理系統(tǒng)或企業(yè)級...

    Cciradih 評論0 收藏0

  • react搭建后臺管理（react初窺）

    摘要：前言以前一直是用進行的開發(fā)于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設(shè)置的版本。 前言 以前一直是用vue進行的開發(fā), 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了 本來是想寫一個 類似 Vue仿今日頭條 那樣...

    wangjuntytl 評論0 收藏0

  • 【翻譯】Next.js背后的哲學(xué)和設(shè)計

    摘要：無數(shù)的模板語言和框架應(yīng)運而生但是技術(shù)始終被分割為前端和后端。這意味著一個頁面可以有很多的這并不會對其余的頁面有任何影響。提前綁定和編譯預(yù)測是一個非常有效的部署方式。最后，這是我們對于這個特定問題的貢獻。 Next.js 原文地址 Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) 和 Tony Kovanen (@tonykova...

    plokmju88 評論0 收藏0

  • Nextjs中文文檔

    摘要：中文站點中文站當(dāng)前翻譯版本為。注意將不能使用在子組件中。只能使用在頁面中。替換路由組件默認(rèn)將新推入路由棧中。以防服務(wù)端渲染發(fā)生錯誤，建議事件寫在生命周期里。禁止文件路由默認(rèn)情況，將會把下的所有文件匹配路由如渲染為如果你的項目使用 Next.js 是一個輕量級的 React 服務(wù)端渲染應(yīng)用框架。 Next.js中文站點 http://nextjs.frontendx.cn Next.j...

    luckyw 評論0 收藏0

  • react 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：更多參考通過庫掌握函數(shù)組件有些時候，我們想要動態(tài)的加載一些組件按需加載，比如在一個單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實例化當(dāng)前頁面的時候，才會去加載相應(yīng)的組件。 react 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識的文章，需要熟悉 React 相關(guān)知識 主架構(gòu)：react, react-router, redux, redux...

    hersion 評論0 收藏0

發(fā)表評論

0條評論

zeyu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<