关于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使用include/require
Nov 13 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue中使用rem布局代码详解
Oct 30 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
JS实现放大镜效果
Sep 21 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
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解vue表单——小白速看
2018/04/08 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Python存取XML的常见方法实例分析
2017/03/21 Python
python中requests小技巧
2017/05/10 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python判断变量是否为列表的方法
2020/09/17 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
市场总经理岗位职责
2014/04/11 职场文书
会计毕业生自荐书
2014/06/12 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
MySQL索引是啥?不懂就问
2021/07/21 MySQL
vue的项目如何打包上线
2022/04/13 Vue.js