antDesignPro+umi配置路由菜单第一个hello work

1、在目录src/pages 建立一个NewPages.js 文件

2、NewPages.js文件内容写入

import React, {Component} from 'react';
export default class NewPage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        hello work
      </div>
    )
  }
}

antDesignPro+umi配置路由菜单第一个hello work
3、配置路由
在目录config 文件 router.config.js 新增一个路径

{
path: '/NewPage',
name:'新页面',
component: './NewPage',
routes:[]
},

antDesignPro+umi配置路由菜单第一个hello work
4、打开浏览器点击页面查看效果 localhost:8000/NewPage

其他：路由配置基本规则
假设pages目录结构如下：

<span style="color:#2c3e50"><span style="color:#cccccc"><code>+ pages/
  + users/
    - index.js
    - list.js
  - index.js
</code></span></span>

然后，umi将自动生成路由配置，如下所示：

<span style="color:#2c3e50"><span style="color:#cccccc"><code><span style="color:#cccccc">[</span>
  <span style="color:#cccccc">{</span> path<span style="color:#cccccc">:</span> <span style="color:#7ec699">'/'</span><span style="color:#cccccc">,</span> component<span style="color:#cccccc">:</span> <span style="color:#7ec699">'./pages/index.js'</span> <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>
  <span style="color:#cccccc">{</span> path<span style="color:#cccccc">:</span> <span style="color:#7ec699">'/users/'</span><span style="color:#cccccc">,</span> component<span style="color:#cccccc">:</span> <span style="color:#7ec699">'./pages/users/index.js'</span> <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>
  <span style="color:#cccccc">{</span> path<span style="color:#cccccc">:</span> <span style="color:#7ec699">'/users/list'</span><span style="color:#cccccc">,</span> component<span style="color:#cccccc">:</span> <span style="color:#7ec699">'./pages/users/list.js'</span> <span style="color:#cccccc">}</span><span style="color:#cccccc">,</span>
<span style="color:#cccccc">]</span></code></span></span>

详细参考：https://umijs.org/guide/router.html#dynamic-routing

antDesignPro+umi配置路由菜单第一个hello work

相关推荐