小小园丁

umi使用介绍

1、结构

.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
└── src/ // 源码目录，可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名，导出 react 组件
├── page1.test.js // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2，任意命名
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json

  • src/layouts ：

　　实际上实在原来的路由外面套了一层

         route： 

         [path: , component:]

           如果使用layouts/index.js，那么

         route:

         [{path:, component:,

           routes:[path:, component]} ]

  • src/pages:

　　约定pages下所有(j|t)sx? 即为路由

  • src/pages/.umi:

　　这个是umi dev生产的临时目录，默认包含umi.js和router.js 

　　不由随便修改，umi重启或者pages文件修改都会重新生成哥哥文件夹的文件 

2、新增页面

进入src目录，执行命令

umi g page users
即可打开 http://localhost:8000/users

3、配置. umirc.ts

    "types" 只能在 .ts 文件中使用。TypeScript是JavaScript的超集。 引入了类的概念，要求明确的类型。严格的类型检查机制。添加了模块支持和API导出的能力。

import { IConfig } from 'umi-types';

// ref: https://umijs.org/config/
const config: IConfig = {
  treeShaking: true,
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: { webpackChunkName: true },
        title: 'TAZAN',
        dll: true,
        locale: {
          enable: true,
          default: 'en-US',
        },
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/,
            /components\//,
          ],
        },
      },
    ],
  ],
  //配置式路由
  routes: [
    { path: '/', component: '../pages/index.tsx' },
    { path: '/tarzan', component: '../pages/index.tsx' },
    { path: '/homePage', component: '../pages/HomePage/index.tsx' },
  ],
};

export default config;

 

4、配置config/config.ts

import { IConfig } from 'umi-types';

// ref: https://umijs.org/config/
const config: IConfig = {
  treeShaking: true,
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: { webpackChunkName: true },
        title: 'TAZAN',
        dll: true,
        locale: {
          enable: true,
          default: 'en-US',
        },
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/,
            /components\//,
          ],
        },
      },
    ],
  ],
  //配置式路由
  routes: [
    { path: '/', component: '../pages/index.tsx' },
    { path: '/tarzan', component: '../pages/index.tsx' },
    { path: '/homePage', component: '../pages/HomePage/index.tsx' },
  ],
};

export default config;

 

 5、在layout里根据路由去使用不同layout，props.children是layout

import React from 'react';
import styles from './index.css';

const BasicLayout: React.FC = props => {
  if (props.location.pathname === '/tarzan') {
    return <div>{props.children}</div>;
  }

  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
      {props.children}
    </div>
  );
};

export default BasicLayout;

 

6、transition

在 layout 组件（layouts/index.js 或者 pages 子目录下的 _layout.js）里在渲染子组件时用 TransitionGroup 和 CSSTransition 包裹一层，并以 location.pathname 为 key，

import withRouter from 'umi/withRouter';
import { TransitionGroup, CSSTransition } from "react-transition-group";

export default withRouter(
  ({ location }) =>
    <TransitionGroup>
      <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
        { children }
      </CSSTransition>
    </TransitionGroup>
)
上面用到的 fade 样式，可以在 src 下的 global.css 里定义：

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

 

$ yarn add react-transition-group

 7、面包屑

首先安装依赖：

yarn add react-router-breadcrumbs-hoc

然后实现一个breakcrumbs.js.

import React from 'react';
import NavLink from 'umi/navlink';
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import { Breadcrumb } from 'antd';
import routes from '../../config/route';
import { Link } from 'umi';

const BreadCrumbs = withBreadcrumbs(routes)(({ breadcrumbs }) => {
  const breadcrumbArr = breadcrumbs.filter(breadcrumb => breadcrumb.name);
  return (
    <Breadcrumb>
      {breadcrumbArr.map((breadcrumb, index) => {
        return (
          <React.Fragment>
            <Breadcrumb.Item key={breadcrumb.key}>
              <Link to={breadcrumb.match.url}>{breadcrumb.name}</Link>
            </Breadcrumb.Item>
            {/* index < breadcrumbs.length - 1 && <i> / </i> */}
          </React.Fragment>
        );
      })}
    </Breadcrumb>
  );
});

export default BreadCrumbs;

 

8、如何跳转

umi/link

通过声明式做跳转
/* 普通使用 */ 
<Link to="/">go to </Link>
/* 带参数 */
<Link to="/path?a=c">goto</Link>
/* 包含component*/
<Link to="/path?a=c"><button>goto</button></Link>

 

umi/router   |  router.replace(path)

router.push(path)

import router from 'umi/router'
//普通跳转
router.push('/path');
//带参数
router.push('/path?a=b');
router.push({
  pathname: '/path',
  query: {
   a: 'c',
  }
})

 

router.go(n)

跳到制定页面 

import router from 'umi/router';
router.go(-1);
router.go(2);

router.goBack()

后退一页

import router from 'umi/router';
router.goBack();

umi/redirect

重定向页面

import Redirect from 'umi/redirect';
<Redirect to = "/path" />

umi/prompt   |  umi/navLink

https://umijs.org/zh/api/#umi-withrouter

config route 如何设置嵌套：

 

怎么设置scroll to top 

在 layout 组件（layouts/index.js 或者 pages 子目录下的 _layout.js）的 componentDidUpdate 里决定是否 scroll to top，比如：

import { Component } from 'react';
import withRouter from 'umi/withRouter';

class Layout extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }
  render() {
    return this.props.children;
  }
}

export default withRouter(Layout);

 

posted on 2019-06-26 13:39  小小园丁  阅读(311)  评论(0)  编辑  收藏  举报

导航