umi3js 创建项目

安装

npm i umi -g

项目目录

md umi-app
cd umi-app

生成页面
生成首页

umi g page index

启动

umi dev

再创建一个页面about

umi g page about

动态路由
再创建一个页面users/’$id’

umi g page users/'$id'

动态路由取值

export default ({match}) => {
  return (
    <div>
      <h1 className={styles.title}>Page users/$id</h1>
      <p>{match.params.id}</p>
    </div>
  );
}

嵌套路由
目录下面出现_layout组件则会转换路由配置为嵌套路由
创建父组件

umi g page users/_layout
umi g page users/index

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

export default (props) => {
  return (
    <div>
      <h1 className={styles.title}>Page users/_layout</h1>
      {props.children} 
    </div>
  );
}