关于React动态加载路由处理！

zeyu 发布于2019-08-23 14:33 / 3262人阅读

摘要：前言相信很多人都遇到过想在项目中动态加载路由这种问题，接下来我们逐步实现。首页未定义未定义施工中个人助理待办事项已办事项系统消息系统消息详情从代码中可以看出已经实现了的的引入，这样自然就可以通过一个循环来实现动态的加载啦

前言

相信很多人都遇到过想在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云服务器路由器动态域名设置动态加载动态加载数据动态加载页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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