关于React动态加载路由处理的相关问题


Posted in Javascript onJanuary 07, 2019

前言

相信很多人都遇到过想在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 <Component {...this.props} />
    }
    return null
   }
  }
 }

在此说明componentWillUnmount钩子是为了解决Can only update a mounted or mounting component的这个问题,原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件。

接下来实现本地文件路径的传入

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

将已知地址路径传递到一个函数并把这个函数作为参数传递到 asyncComponent中这样asyncComponent就能接收到这个路由的地址了,然后我们要做的就是将这个asyncComponent函数带入到router中。

<Router history={hashHistory}>
    <Route name="home" breadcrumbName="首页" path="/" component={MainLayout}>
      <IndexRoute name="undefined" breadcrumbName="未定义" component={() => <div>未定义</div>}/>
      <Route name="Development" breadcrumbName="施工中" path="Development" component={DevelopmentPage}/>
      <Route breadcrumbName="个人助理" path="CustomerWorkTodo" component={({children}) => <div className="box">{children}</div>}>
        <Route name="Agency" breadcrumbName="待办事项" path="Agency" component={asyncComponent(() => load('GlobalNotification/CustomerWorkAssistantTodo/CustomerAgencyMatter'))}/>
        <Route name="Already" breadcrumbName="已办事项" path="Already" component={asyncComponent(() => load('GlobalNotification/CustomerWorkAssistantTodo/CustomerAlreadyMatter'))}/>
        <Route name="SystemMessage" breadcrumbName="系统消息" path="SystemMessage/:data" component={asyncComponent(() => load('GlobalNotification/SystemMessage/SystemMessage'))}/>
        <Route name="SystemMessagePer" breadcrumbName="系统消息详情" path="SystemMessagePer/:data" component={asyncComponent(() => load('GlobalNotification/SystemMessage/SystemMessagePer'))}/>
      </Route>
    </Router>
 </Router>

从代码中可以看出已经实现了router 的component 的引入,这样自然就可以通过一个循环来实现动态的加载啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue+iview 兼容IE11浏览器的实现方法
Jan 07 #Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 #Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
You might like
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
numpy中的高维数组转置实例
2018/04/17 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
留学自荐信
2013/10/10 职场文书
寒假实习自荐信
2014/01/26 职场文书
超市重阳节活动方案
2014/02/10 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
教研活动总结
2014/04/28 职场文书
公司股东合作协议书
2014/09/14 职场文书
导游欢迎词范文
2015/01/23 职场文书
会议室使用管理制度
2015/08/06 职场文书
毕业设计工作总结
2015/08/14 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle