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

 

 

展开阅读全文

没有更多推荐了,返回首页