关于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 的引入,这样自然就可以通过一个循环来实现动态的加载啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
关于React动态加载路由处理的相关问题
-
解决vue动态路由异步加载import组件,加载不到module的问题
-
关于vue中根据用户权限动态添加路由的问题
-
flex的tree动态加载大量数据与滚动条相关问题探讨
-
关于PHP5.2.17版本中不能动态加载php_curl.dll的有关问题
-
mysql-ssh 关于数据库读取方式及内容处理的相关问题,求解答!
-
mysql-ssh 关于数据库读取方式及内容处理的相关问题,求解答!
-
关于React动态加载路由处理的相关问题
-
动态路由页面切换的问题解决及NavigationDuplicated报错处理
-
解决vue动态路由异步加载import组件,加载不到module的问题