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

前言

相信很多人都遇到过想在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 的引入，这样自然就可以通过一个循环来实现动态的加载啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。