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);
}
目录
这样的话直接可以动态引入modules里面的路由信息，不用在单独引入了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了React项目打包发布到Tomcat页面空白问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
React-Markdown 是一个基于 React 的 Markdown 渲染组件库,其核心设计理念是通过 Unified 生态系统实现安全、可扩展的 Markdown 解析2025-04-04
这篇文章主要介绍了前端 react 实现图片上传前压缩(缩率图),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的2022-12-12
这篇文章主要介绍了如何在react项目中做公共配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了React中使用UEditor的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了详解React 中组件通信的几种主要方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
最新评论