react-umi 环境搭建，创建第一个路由页面

文章参考

1. 约定式路由 基础路由
2. umi路由 API

umi环境搭建

1. 安装nodejs
2. 安装yarn

cnpm install -g yarn

3. 安装umi

cnpm install -g umi

利用umi脚手架创建react工程

1. 创建myapp文件夹

mkdir myapp && cd myapp

2. 创建umi 工程

yarn create umi

建议使用yarn create，能确保每次使用最新的脚手架

umi g命令创建页面或者组件

案例（在pages\user目录下面创建userDetail页面）

C:\huangbiao\gitcode\umiStudy>umi g page user/userDetail
   create src\pages\user\userDetail.js
   create src\pages\user\userDetail.css
√  success

在工程的根目录下面执行 umi g命令

添加访问页面路由

umi 会根据 pages 目录自动生成路由配置。

规则说明

假设 pages 目录结构如下：

+ pages/
  + users/
    - index.js
    - list.js
  - index.js

那么，umi 会自动生成路由配置如下：

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },
]

案例二

1. 创建工程名/src/pages/user/userList.js文件
2. 可以通过http://localhost:8000/user/userList访问该文件

自定义路由（配置文件）

1. 工程根目录/config/config.js
2. 工程根目录/.umirc.js

// ref: https://umijs.org/config/
import { primaryColor } from '../src/defaultSettings';

export default {


  /**
   * 路由相关配置
   */
  routes: [
    {
      path: '/user',
      component: '../layouts/UserLayout',
      routes: [{ path: '/user', component: './Welcome' }],
    },
    {
      path: '/',
      component: '../layouts/BasicLayout',
      routes: [
        { path: '/', redirect: '/welcome' },
        // dashboard
        {
          path: '/welcome',
          name: 'welcome',
          icon: 'smile',
          component: './Welcome',
        },
        {
          path: 'https://github.com/umijs/umi-blocks/tree/master/ant-design-pro',
          name: 'more-blocks',
          icon: 'block',
        },
      ],
    },
  ],
 
};