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 (
      
hello work
) } }

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

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

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

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

+ 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/guide/router.html#dynamic-routing

你可能感兴趣的:(学习react,antDesignPro)