Umi3 创建，配置环境，路由传参（代码示例）
目录
创建项目
配置环境
创建脚手架
项目结构及其目录、
路由
配置路由
嵌套路由
编程式导航和声明式导航
声明式导航
编程式导航
约定式路由
路由传参
query传参（问号）
接收参数
params传参（动态传参）
接收参数
创建项目
配置环境
首先得有 node，并确保 node 版本是 10.13 或以上。（18版本可能会不适配）
$ node -v //查看版本
v16.20.2如果出现版本错误，可以使用nvm进行node版本管理https://blog.csdn.net/kkkys_kkk/article/details/135071784?spm=1001.2014.3001.5501
推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v创建脚手架
创建项目文件夹
$ mkdir myapp && cd myapp通过官方工具创建项目，
$ 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安装依赖
$ yarn
或者
$ npm i启动项目
$ yarn start
或者
$ npm start在浏览器里打开 http://localhost:8000/，能看到以下界面
项目结构及其目录、
├── package.json 项目基本信息 、依赖信息
├── tsconfig.json ts的配置文件
├── typings.d.ts ts的类型声明文件(凡是以xxx.d.ts结尾的文件都是咱们的ts类型声明文件)
├── .umirc.ts 核心配置文件
├── .env 环境参数文件
├── mock mock数据
├── src
├── .umi 编译后自动生成的文件，不需要动
├── pages 业务组件文件夹(页面)
├── index.less
└── index.tsx 业务组件路由
umi的路由分为配置路由与约定路由
配置路由
在`pages`中新建一个页面
export default function Home() {
return (
Home
)
}在.umirc.ts中的routes配置项中新增路由配置
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{
path: '/home',
component: '@/pages/Home'
},
{
path: '/course',
component: '@/pages/Course'
}
],
fastRefresh: {},
});umi官方推荐我们使用config方法
在项目文件下创建config文件夹，复制umirc.ts内容，同时删除umirc.ts文件，因为umirc.ts的权重高
创建config文件，粘贴umirc.ts，将routes作为文件导入引入
import { defineConfig } from 'umi';
import routes from './router/index';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
fastRefresh: {},
routes
});创建路由文件，声明路由，导出
const routes=[
{
path: '/home',
component: '@/pages/Home'
},
{
path: '/course',
component: '@/pages/Course'
}
],
export default routes嵌套路由
嵌套路由是通过`routes`属性来实现的
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'},
]
},
]然后在组件中通过props.children来渲染子路由
import React from 'react';
import styles from './index.less';
export default (props:any) => {
return (
{ props.children }
)
}编程式导航和声明式导航
声明式导航
import React from 'react';
import styles from './index.less';
import { NavLink } from 'umi';
// 通过接口定义props类型
interface Props {
children: React.ReactNode
}
// 在umijs中，Props类型的定义一般会用到React.FC类型，FunctionComponent类型
// 在React.FC类型中，Props类型是一个泛型，用来定义组件所接收的Props类型
const Course:React.FC = (props) => {
return (
{/* v5版本的路由是一样的 */}
去课程
Course
{ props.children }
)
}
export default Course; 编程式导航
编程式导航是通过: history.push 方法来实现的
import styles from './index.less';
import { NavLink, history } from 'umi';
export default function Home() {
return (
Pages Home
{/* 声明式导航 */}
去课程
{/* 编程式导航 */}
)
}约定式路由
如果没有routes 配置 ， Umi 会进入约定式路由模式， 然后分析src/pages 目录拿到路由配置。 比如以下文件结构：
└── pages
├── index.tsx
└── users.tsx会得到以下路由配置
[
{ exact: true, path: '/', component: '@/pages/index' },
{ exact: true, path: '/users', component: '@/pages/users' }
]路由传参
query传参（问号）
写入路径中
history.push('/list?id=1');
以对象形式
history.push({
pathname: '/list',
query: {
name: 'b',
},
});接收参数
使用history方法
import {history } from 'umi'
生成变量接收参数
const id =history.location.search.split('=')[1]或者使用useLocation函数，返回表示当前 URL 的对象。您可以将其视为每当 URL 更改时返回新位置。
import { useLocation } from 'umi';
export default () => {
const location = useLocation();
return (
- location: {location.pathname}
);
};params传参（动态传参）
路由表配置改为动态
{
path:'/anthor/:id',
component:'@/pages/detail/Id'
},
同样使用history方法
将需要传递的参数直接写入路径当中
接收参数
useParams返回 URL 参数的键/值对的对象。使用它来访问当前路由
import { useParams } from 'umi';
export default () => {
const params = useParams();
return (
- params: {JSON.stringify(params)}
);
};返回的是包含数据信息的对象