umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析
實(shí)現(xiàn)過程
umi
默認(rèn)約定在/src/pages
添加的(j|t)sx?
文件會自動加載為路由。同樣我們希望實(shí)現(xiàn)在某個(gè)目錄下添加的markdown
文件自動加載成為路由直接訪問,本章我們首先來實(shí)現(xiàn)路由自動解析及頁面展示的功能。
- 約定/docs目錄為
markdown
解析目錄 - 添加路由解析插件,
- 解析/docs目錄下文件為路由
- 通過自動解析的路由訪問頁面
本節(jié)完整代碼可參考 domi/feature/routes
添加路由加載插件
我們約定在項(xiàng)目根目錄下/docs
目錄為markdown
自動加載目錄,先創(chuàng)建這個(gè)目錄
mkdir /docs
在剛創(chuàng)建的/docs
目錄下添加兩個(gè)組件,用于驗(yàn)證解析效果
// /docs/index.tsx import react from 'react' const Home = () => { return (<div>hello domi</div>) } export default Home
// /docs/button/index.tsx import react from 'react' const Button = () => { return <button>Button</button> } export default Button
接下來創(chuàng)建路由解析插件,插件我們統(tǒng)一放在/src/features
目錄下
# 創(chuàng)建插件目錄 mkdir /src/features # /docs目錄路由解析插件 touch /src/features/routes.ts
接下來將插件注冊到配置.umirc.ts
中
import { defineConfig } from "umi"; export default defineConfig({ plugins: [ './src/features/routes.ts', ], });
modifyRoutes
umi
提供了modifyRoutes
hook,通過這個(gè)鉤子我們可以自由修改umi
的路由,文檔可參考插件 API | UmiJS。
該函數(shù)入?yún)閡mi當(dāng)前收集到的路由集合,返回值于入?yún)⒁恢?,我們可以通過改變返回值來修改umi
的路由。
通過打印入?yún)?,我們可以看到初始化?xiàng)目默認(rèn)的路由為以下結(jié)構(gòu):
{ index: { path: '/', id: 'index', parentId: '@@/global-layout', file: 'index.tsx', absPath: '/' }, docs: { path: 'docs', id: 'docs', parentId: '@@/global-layout', file: 'docs.tsx', absPath: '/docs' }, '@@/global-layout': { id: '@@/global-layout', path: '/', file: 'D:/project/domi/src/layouts/index.tsx', parentId: undefined, absPath: '/', isLayout: true } }
這里有幾個(gè)關(guān)鍵的屬性:
isLayout
屬性表示該對象是否為布局,umi
的路由對象有兩種形式,一種為頁面,另一種為布局,通過該屬性值區(qū)分。parentId
則標(biāo)注該頁面使用到了哪個(gè)布局。path
表示頁面的訪問路徑file
表示該對象的組件文件路徑,相對路徑默認(rèn)會在/src/pages
中找
由于我們要自己來生成markdown
專屬路由,用不到umi
默認(rèn)提供的約定路由特性,所以我們不會在/src/pages
中寫頁面代碼,這個(gè)目錄我們可以刪掉。
解析生成路由
我們需要在modifyRoutes
鉤子函數(shù)中,根據(jù)/docs
目錄下的文件來創(chuàng)建對應(yīng)的路由,代碼如下所示
// /src/features/routes.ts import path from 'path'; import type { IApi } from 'umi'; import type { IRoute } from '@umijs/core/dist/types'; import { getConventionRoutes } from '@umijs/core'; export default (api: IApi) => { api.describe({ key: 'domi:routes' }); api.modifyRoutes((oRoutes: Record<string, IRoute>) => { const routes: Record<string, IRoute> = {} const docDir = 'docs' // 獲取某個(gè)目錄下所有可以配置成umi約定路由的文件 const dirRoutes: Record<string, IRoute> = getConventionRoutes({ base: path.join(api.cwd, docDir), }); Object.entries(dirRoutes).forEach(([key, route]) => { // 這里將文件的路徑改為絕對路徑,否則umi會默認(rèn)找/src/pages下組件 route.file = path.resolve(docDir, route.file); routes[route.id] = route; }); return routes; }); };
注意:如果用pnpm
來安裝依賴,上面代碼的imoprt可能找不到依賴,需要在.npmrc
中添加一行node-linker=hoisted
,并從新pnpm install
,將依賴扁平化處理。
getConventionRoutes
這里用到了一個(gè)umi
內(nèi)置的函數(shù)getConventionRoutes
,該函數(shù)可以將某個(gè)目錄下符合umi定義的約定路由的文件,轉(zhuǎn)換成為路由對象
前面我們已經(jīng)在/docs
下創(chuàng)建了兩個(gè)測試文件,將其打印出來dirRoutes
變量為:
{ 'button/index': { path: 'button', id: 'button/index', parentId: undefined, file: 'button/index.tsx', absPath: '/button' }, index: { path: '/', id: 'index', parentId: undefined, file: 'index.tsx', absPath: '/' } }
從打印結(jié)果可以看到,getConventionRoutes
函數(shù)已經(jīng)幫我們將/docs
目錄下的文件解析出來。我們只需要處理以下文件路徑,即可使用。
訪問運(yùn)行
運(yùn)行項(xiàng)目可以看到我們能正常訪問到/
和/button
下的兩個(gè)頁面,到這里我們就成功實(shí)現(xiàn)了路由加載。到這一步我們其實(shí)和umi
提供的約定式路由功能差不多,只不過umi
是在/src/pages
下寫頁面,我們這里是在/docs
下寫頁面。
現(xiàn)在切換頁面需要我們手動輸入地址比較麻煩,下一節(jié)我們來實(shí)現(xiàn)一個(gè)全局Layout布局組件,將導(dǎo)航放在這個(gè)組件中。
以上就是umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析的詳細(xì)內(nèi)容,更多關(guān)于umi插件仿dumi路由解析的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
跨端開發(fā)框架avm組件封裝經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了跨端開發(fā)框架avm組件封裝的經(jīng)驗(yàn)分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Svelte嵌套組件preventDefault構(gòu)建Web應(yīng)用
這篇文章主要介紹了Svelte嵌套組件preventDefault構(gòu)建Web應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12JS實(shí)現(xiàn)大數(shù)相加大數(shù)相乘示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)大數(shù)相加大數(shù)相乘示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JS實(shí)現(xiàn)簡單的操作桿旋轉(zhuǎn)示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)簡單的操作桿旋轉(zhuǎn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01