关于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 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php创建无限级树型菜单
2015/11/05 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python编写一个闹钟功能
2017/07/11 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
工程监理应届生求职信
2013/11/09 职场文书
高中自我评价分享
2013/12/05 职场文书
护士进修自我鉴定
2014/02/07 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
植树节新闻稿
2015/07/17 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
市场营销计划书
2019/04/24 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Python制作春联的示例代码
2022/01/22 Python