欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-06 17:16:40
前言 相信很多人都遇到过想在react项目中动态加载路由这种问题,接下来我们逐步实现。 引入必要的依赖 import react from 're...

前言

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

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