目錄
創(chuàng)建項(xiàng)目
配置環(huán)境
創(chuàng)建腳手架
項(xiàng)目結(jié)構(gòu)及其目錄、
路由
配置路由
嵌套路由
編程式導(dǎo)航和聲明式導(dǎo)航
聲明式導(dǎo)航
編程式導(dǎo)航
約定式路由
路由傳參
query傳參（問(wèn)號(hào)）
接收參數(shù)
params傳參（動(dòng)態(tài)傳參）
接收參數(shù)
創(chuàng)建項(xiàng)目
配置環(huán)境
首先得有 node，并確保 node 版本是 10.13 或以上。（18版本可能會(huì)不適配）
$ node -v //查看版本
v16.20.2如果出現(xiàn)版本錯(cuò)誤，可以使用nvm進(jìn)行node版本管理https://blog.csdn.net/kkkys_kkk/article/details/135071784?spm=1001.2014.3001.5501
推薦使用 yarn 管理 npm 依賴(lài)，并使用國(guó)內(nèi)源（阿里用戶(hù)使用內(nèi)網(wǎng)源）。
# 國(guó)內(nèi)源
$ npm i yarn tyarn -g
# 后面文檔里的 yarn 換成 tyarn
$ tyarn -v
# 阿里內(nèi)網(wǎng)源
$ tnpm i yarn @ali/yarn -g
# 后面文檔里的 yarn 換成 ayarn
$ ayarn -v創(chuàng)建腳手架
?創(chuàng)建項(xiàng)目文件夾
$ mkdir myapp && cd myapp通過(guò)官方工具創(chuàng)建項(xiàng)目，
$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
Copy: .editorconfig
Write: .gitignore
Copy: .prettierignore
Copy: .prettierrc
Write: .umirc.ts
Copy: mock/.gitkeep
Write: package.json
Copy: README.md
Copy: src/pages/index.less
Copy: src/pages/index.tsx
Copy: tsconfig.json
Copy: typings.d.ts安裝依賴(lài)
$ yarn
或者
$ npm i啟動(dòng)項(xiàng)目
$ yarn start
或者
$ npm start在瀏覽器里打開(kāi) http://localhost:8000/，能看到以下界面
項(xiàng)目結(jié)構(gòu)及其目錄、
├── package.json 項(xiàng)目基本信息 、依賴(lài)信息
├── tsconfig.json ts的配置文件
├── typings.d.ts ts的類(lèi)型聲明文件(凡是以xxx.d.ts結(jié)尾的文件都是咱們的ts類(lèi)型聲明文件)
├── .umirc.ts 核心配置文件
├── .env 環(huán)境參數(shù)文件
├── mock mock數(shù)據(jù)
├── src
├── .umi 編譯后自動(dòng)生成的文件，不需要?jiǎng)? ├── pages 業(yè)務(wù)組件文件夾(頁(yè)面)
├── index.less
└── index.tsx 業(yè)務(wù)組件路由
umi的路由分為配置路由與約定路由
配置路由
在`pages`中新建一個(gè)頁(yè)面
export default function Home() {
return (
<div>Home</div>
)
}在.umirc.ts中的routes配置項(xiàng)中新增路由配置
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{
path: '/home',
component: '@/pages/Home'
},
{
path: '/course',
component: '@/pages/Course'
}
],
fastRefresh: {},
});umi官方推薦我們使用config方法
在項(xiàng)目文件下創(chuàng)建config文件夾，復(fù)制umirc.ts內(nèi)容，同時(shí)刪除umirc.ts文件，因?yàn)閡mirc.ts的權(quán)重高
創(chuàng)建config文件，粘貼umirc.ts，將routes作為文件導(dǎo)入引入
import { defineConfig } from 'umi';
import routes from './router/index';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
fastRefresh: {},
routes
});創(chuàng)建路由文件，聲明路由，導(dǎo)出
const routes=[
{
path: '/home',
component: '@/pages/Home'
},
{
path: '/course',
component: '@/pages/Course'
}
],
export default routes嵌套路由
嵌套路由是通過(guò)`routes`屬性來(lái)實(shí)現(xiàn)的
const routes=[
{
path:'/index',
component:'@/pages/Base/Base',
routes:[
{
path:'one',
component:'@/pages/One/One'
},
{path:'two',component:'@/pages/Two/Two'},
{path:'three',component:'@/pages/Three/Three'},
]
},
]然后在組件中通過(guò)props.children來(lái)渲染子路由
import React from 'react';
import styles from './index.less';
export default (props:any) => {
return (
<div className={ styles['container'] }>
{ props.children }
</div>
)
}編程式導(dǎo)航和聲明式導(dǎo)航
聲明式導(dǎo)航
import React from 'react';
import styles from './index.less';
import { NavLink } from 'umi';
// 通過(guò)接口定義props類(lèi)型
interface Props {
children: React.ReactNode
}
// 在umijs中，Props類(lèi)型的定義一般會(huì)用到React.FC類(lèi)型，F(xiàn)unctionComponent類(lèi)型
// 在React.FC類(lèi)型中，Props類(lèi)型是一個(gè)泛型，用來(lái)定義組件所接收的Props類(lèi)型
const Course:React.FC<Props> = (props) => {
return (
<div className={ styles['container'] }>
{/* v5版本的路由是一樣的 */}
<NavLink to="/course" activeClassName="active">去課程</NavLink>
Course <br />
{ props.children }
</div>
)
}
export default Course;編程式導(dǎo)航
編程式導(dǎo)航是通過(guò): history.push 方法來(lái)實(shí)現(xiàn)的
import styles from './index.less';
import { NavLink, history } from 'umi';
export default function Home() {
return (
<div className={ styles['container'] }>
Pages Home
{/* 聲明式導(dǎo)航 */}
<NavLink to="/course" activeClassName="active">去課程</NavLink>
{/* 編程式導(dǎo)航 */}
<button onClick={ () => history.push('/course') }>去課程</button>
</div>
)
}約定式路由
如果沒(méi)有routes 配置 ， Umi 會(huì)進(jìn)入約定式路由模式， 然后分析src/pages 目錄拿到路由配置。 比如以下文件結(jié)構(gòu)：
└── pages
├── index.tsx
└── users.tsx會(huì)得到以下路由配置
[
{ exact: true, path: '/', component: '@/pages/index' },
{ exact: true, path: '/users', component: '@/pages/users' }
]路由傳參
query傳參（問(wèn)號(hào)）
寫(xiě)入路徑中
history.push('/list?id=1');
以對(duì)象形式
history.push({
pathname: '/list',
query: {
name: 'b',
},
});接收參數(shù)
使用history方法
import {history } from 'umi'
生成變量接收參數(shù)
const id =history.location.search.split('=')[1]?或者使用useLocation函數(shù)，返回表示當(dāng)前 URL 的對(duì)象。您可以將其視為每當(dāng) URL 更改時(shí)返回新位置。
import { useLocation } from 'umi';
export default () => {
const location = useLocation();
return (
<div>
<ul>
<li>location: {location.pathname}</li>
</ul>
</div>
);
};params傳參（動(dòng)態(tài)傳參）
路由表配置改為動(dòng)態(tài)
{
path:'/anthor/:id',
component:'@/pages/detail/Id'
},
同樣使用history方法
<button onClick={()=>{history.push('/anthor/1')}}>click me</button>將需要傳遞的參數(shù)直接寫(xiě)入路徑當(dāng)中
接收參數(shù)
useParams返回 URL 參數(shù)的鍵/值對(duì)的對(duì)象。使用它來(lái)訪(fǎng)問(wèn)當(dāng)前路由文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-803163.html
import { useParams } from 'umi';
export default () => {
const params = useParams();
return (
<div>
<ul>
<li>params: {JSON.stringify(params)}</li>
</ul>
</div>
);
};返回的是包含數(shù)據(jù)信息的對(duì)象文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-803163.html
到了這里，關(guān)于Umi3 創(chuàng)建，配置環(huán)境，路由傳參（代碼示例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
