react vite使用import.meta.glob批量导入路由方式

更新时间：2025年10月27日 09:26:10 作者：初遇你时动了情

文章介绍了如何通过动态引入模块中的路由信息,简化了传统的路由管理方式,无需单独引入每个模块的路由

react vite使用import.meta.glob批量导入路由

//注意需要加入这个才能是同步，不然就是异步
const metaRouters:any = import.meta.glob("./modules/*.tsx",{ eager: true });


// 路由处理
export const routerArray: RouteObject[] = [];

for (const key in metaRouters) {
    // 这个path当路由的path，引入文件不区分大小写，手动改首字母大写
    // 根据自己的需要，自己组装path
    // let path = key.split("/")[5];
    // path =
    //   "/antd-doc/" + path.substring(0, 1).toLocaleUpperCase() + path.substring(1);
    //这个是组件，可以直接使用
    const component = metaRouters[key].default;
      routerArray.push(...component);
  }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在react中使用vuex的示例代码
这篇文章主要介绍了在react中使用vuex的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React传递参数的几种方式
本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
React-native桥接Android原生开发详解
本篇文章主要介绍了React-native桥接Android原生开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
详解操作虚拟dom模拟react视图渲染
这篇文章主要介绍了详解操作虚拟dom模拟react视图渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React常见的 HOC 使用案例及示例代码
高阶组件（Higher-Order Component,HOC）是一种用于在 React 中复用组件逻辑的技术,这篇文章主要介绍了React常见的 HOC 使用案例示例代码,需要的朋友可以参考下
2024-08-08
基于React Native 0.52实现轮播图效果
这篇文章主要为大家详细介绍了基于React Native 0.52实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
react之umi配置国际化语言locale的踩坑记录
这篇文章主要介绍了react之umi配置国际化语言locale的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React路由组件传参的三种方式(params、search、state)
本文主要介绍了React路由组件传参的三种方式，主要包括了params、search、state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
一文详解React类组件中的refs属性
react中的ref类似于vue中的ref,都是可以操作dom的,这篇文章我们通过一个demo来学习这个属性,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-08-08
详解React中常见的三种路由处理方式选择
这篇文章主要为大家详细介绍了React中常见的三种路由处理方式该如何选择,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01