關于React動態加載路由處理！

zeyu 發布于2019-08-23 14:33 / 3264人閱讀

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

前言

相信很多人都遇到過想在React項目中動態加載路由這種問題，接下來我們逐步實現。

引入必要的依賴

import React from "react"
import { Router, Route, IndexRoute, hashHistory } from "react-router"

接下來創建一個component函數

目的就是為了變為router的component實現異步加載。

// 異步按需加載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的這個問題，原因是當離開頁面以后，組件已經被卸載，執行setState時無法找到渲染組件。

接下來實現本地文件路徑的傳入

 function load(component) {
    return import(`./routes/${component}`)
  }

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


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

從代碼中可以看出已經實現了router 的component 的引入，這樣自然就可以通過一個循環來實現動態的加載啦！

云服務器 GPU云服務器路由器動態域名設置動態加載動態加載數據動態加載頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100783.html

前端插拔式 SPA 應用架構實現方案

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

Cciradih 2019-08-26 12:14 評論0 收藏0
react搭建后臺管理（react初窺）

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

wangjuntytl 2019-08-22 15:23 評論0 收藏0
【翻譯】Next.js背后的哲學和設計

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

plokmju88 2019-08-21 11:17 評論0 收藏0
Nextjs中文文檔

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

luckyw 2019-08-23 11:55 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

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

hersion 2019-08-30 15:54 評論0 收藏0