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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1import React, {Component} from 'react';

2

3export default class index2 extends Component {

4  constructor(props) {

5    super(props);

6  }

7  render() {

8    return (

9      <div>

10        index2

11      </div>

12    )

13  }

14}

15

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

页面发生了变化， 但是头部没有变化，因为头部是公共的，代码在src/layouts/index.js中

3.路由之间跳转，修改index.js，点击小丑图片，即可跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1import React, {Component} from 'react';

2import Link from 'umi/link';

3

4export default class index extends Component {

5  constructor(props) {

6    super(props);

7  }

8  render() {

9    return (

10      <div>

11        <Link to="/index2">

12          index

13        </Link>

14      </div>

15    )

16  }

17}

18

19

命令式,修改index2.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1import React, {Component} from 'react';

2import router from 'umi/router';

3

4export default class index2 extends Component {

5  constructor(props) {

6    super(props);

7  }

8  goToListPage() {

9    router.push('/');

10  }

11  render() {

12    return (

13      <div onClick={this.goToListPage.bind(this)}>

14        index2

15      </div>

16    )

17  }

18}

19

20

umi路由约定规则：

1
2
3
4
5
6
7
1+ pages/

2  + users/

3    - index.js

4    - list.js

5  - index.js

6

7

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

1
2
3
4
5
6
7
1[

2  { path: '/', component: './pages/index.js' },

3  { path: '/users/', component: './pages/users/index.js' },

4  { path: '/users/list', component: './pages/users/list.js' },

5]

6

7

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