最近换了新框架umijs，以前都是用vue,不够了解react和新的ui库，坎坷的学习磨合之后，总结了下学习经验给大家，希望能帮助到新手~~

- umijs+react+antd是什么

UmiJs官网： v3.umijs.org/zh-CN/docs/…
UmiJs是一个应用框架，开发语言用的react,而antd是UI组件库;
UmiJs 以路由为基础的，支持配置式路由和约定式路由,如果没有 routes 配置，Umi 会进入约定式路由模式 ( 这句话请读3遍！！！ )

- 使用的前提

1. 会react/react-hooks
2. node版本不能太低，安装脚手架v10.0以上，但后面本地验证需要v.16以上
3. 个人建议使用nvm（方便调整node版本）和yarn（安装搭建和启动）
4. 学会使用antd组件库和ant-design/pro-components

- 快速上手umijs

 yarn create @umijs/umi-app //创建项目 （或npx @umijs/create-umi-app）
 yarn //安装依赖
 yarn start //启动项目=》和vue一样有<http://localhost:8000/>链接生成可查看
 yarn build //构建
 yarn global add serve  //本地验证step1 =》生成本地链接验证查看
 serve ./dist   //本地验证step2

- 目录结构

├── package.json
├── .umirc.ts     ----配置文件，包含 umi 内置功能和插件的配置
├── .env          ----环境变量
├── dist          ----构建产物默认存放在这
├── mock          ----目录下所有 js 和 ts 文件会被解析为 mock 文件
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx    ---约定式路由时的全局布局文件
    ├── pages                ---路由组件存放在这
        ├── index.less
        └── index.tsx
    └── app.ts               ---运行时配置文件

• 使用约定式路由和全局layOut

1.打开配置文件.umirc.ts
上面读3遍的话起到作用，要使用约定式路由就不需要配置routes，只用在src/pages下创建tsx文件即会按文件名和结构自动生成路由，所以我注释了已经写的routes数组：

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  // routes: [
  //   { path: '/', component: '@/pages/index' },
  // ],
  fastRefresh: {},
});

2.创建组件 在src/pages中创建一个新的组件products.tsx和products.less products.tsx:

import React from 'react';
import styles from './products.less';
export default function Page() {
  return (
     <div className={styles.wrap}>
      {/* wrap是类名，在products.less中写样式 */}
     products组件在此
    </div>
  );
}

3.直接打开localhost:8000/products
pages下一级文件除了index.tsx其他都会生为 /filename路由地址，更多查看官网约定路由

不止是我的products组件，而且layout布局已经有了，为什么呢？
注意上面目录机构：src/layouts/index.tsx ---约定式路由时的全局布局文件
打开layouts/index.tsx文件：

import ProLayout from '@ant-design/pro-layout';
// 侧边栏的默认关闭需要设置 breakpoint={false} ，如果只设置 defaultCollapsed 会无效
const BasicLayout: FC = ({ children }) => {
  return (
    <ProLayout layout="mix" fixSiderbar defaultCollapsed breakpoint={false}>
      {children}
    </ProLayout>
  );
};

export default BasicLayout;

框架原来搭建后就已经有写好的公共layout，只要用约定式路由就自动使用，想要更改布局，只要在这修改ProLayout的参数即可【具体：procomponents.ant.design/components/…

比如加个标题：

<ProLayout layout="mix" fixSiderbar defaultCollapsed breakpoint={false}
    title="哈哈"
> 
{children} </ProLayout>

4.路由跳转
从index.tsx跳转到product.tsx有3种方法，我只说命令式，其他感兴趣去看下面官网

function goToPage() {
  history.push('/product');
}
...
<span onClick={goToPage}>跳转去产品</span>
//如果要带参数去：
<span onClick={() => {
  history.push({
    pathname: '/products',
    query: {
      id:22
    }
  })
}}
>跳转去产品</span>

product组件接收参数：

export default function Page(props) {
  const {id} = props.location.query;//拿到id
  return(
  ...
  )

官网声明式和props跳转法