umi搭建react+antd项目（二）路由

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26744901/article/details/84029653

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

import React, {Component} from 'react';

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

2.访问http://localhost:8000/index2

页面发生了变化， 但是头部没有变化，因为头部是公共的，代码在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.js 

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

 

参考，不做细解释：https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1