1.我們在src下新增index2.js：

export default function () {
  return (
    <div>index2</div>
  );
}

頁面發生了變化， 但是頭部沒有變化，因為頭部是公共的，程式碼在src/layouts/index.js中

3.路由之間跳轉，修改index.js，點選小丑圖片，即可跳轉

import React, {Component} from 'react';
import Link from 'umi/link';

export default class index extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Link to="/index2">
          index
        </Link>
      </div>
    )
  }
}
 

命令式,修改index2

import React, {Component} from 'react';
import router from 'umi/router';

export default class index2 extends Component {
  constructor(props) {
    super(props);
  }
  goToListPage() {
    router.push('/');
  }
  render() {
    return (
      <div onClick={this.goToListPage.bind(this)}>
        index2
      </div>
    )
  }
}
 

umi路由約定規則：

+ 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' },
]