react vite使用import.meta.glob批量導(dǎo)入路由方式
更新時間：2025年10月27日 09:26:10 作者：初遇你時動了情
文章介紹了如何通過動態(tài)引入模塊中的路由信息,簡化了傳統(tǒng)的路由管理方式,無需單獨引入每個模塊的路由
react vite使用import.meta.glob批量導(dǎo)入路由
//注意需要加入這個才能是同步，不然就是異步
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)文章
這篇文章主要介紹了在react中使用vuex的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本文詳細的介紹了React傳遞參數(shù)的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
React-native橋接Android原生開發(fā)詳解
本篇文章主要介紹了React-native橋接Android原生開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
高階組件（Higher-Order?Component,HOC）是一種用于在?React?中復(fù)用組件邏輯的技術(shù),這篇文章主要介紹了React常見的?HOC?使用案例示例代碼,需要的朋友可以參考下2024-08-08
基于React Native 0.52實現(xiàn)輪播圖效果
這篇文章主要為大家詳細介紹了基于React Native 0.52實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個demo來學(xué)習(xí)這個屬性,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了React中常見的三種路由處理方式該如何選擇,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01