react vite使用import.meta.glob批量導入路由方式
更新時間：2025年10月27日 09:26:10 作者：初遇你時動了情
文章介紹了如何通過動態(tài)引入模塊中的路由信息,簡化了傳統(tǒng)的路由管理方式,無需單獨引入每個模塊的路由
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，引入文件不區(qū)分大小寫，手動改首字母大寫
// 根據(jù)自己的需要，自己組裝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);
}
目錄
這樣的話直接可以動態(tài)引入modules里面的路由信息，不用在單獨引入了
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要總結(jié)介紹了關(guān)于React中ES5與ES6的寫法區(qū)別，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
React項目打包發(fā)布到Tomcat頁面空白問題及解決
這篇文章主要介紹了React項目打包發(fā)布到Tomcat頁面空白問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React-Markdown 是一個基于 React 的 Markdown 渲染組件庫,其核心設計理念是通過 Unified 生態(tài)系統(tǒng)實現(xiàn)安全、可擴展的 Markdown 解析2025-04-04
這篇文章主要介紹了前端 react 實現(xiàn)圖片上傳前壓縮(縮率圖),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-12-12
這篇文章主要介紹了如何在react項目中做公共配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React中使用UEditor的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09
React是用于構(gòu)建用戶界面的JavaScript庫，本文主要介紹了如何創(chuàng)建自己的第一個React頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下2022-12-12