Skip to content
On this page

创建一个页面

src/pages文件夹下创建一个test.js文件,代码如下




















 






 





// 函数组件 or 类组件
import React from "react";
export default function Test() {
  return <div>test页面</div>;
}
// ----------------------------------------------
export default class Test extends React.Component {
  render() {
    return <div>test页面</div>;
  }
}

/**
 * 给 pages 组件追加路由信息
 * export default 组件的原型上添加route信息,或者向外暴露一个 route
 * 会被webpack的webpack-router-generator插件捕获信息
 */

// 1.被捕获 export default 原型上的route
Test.route={
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : "test",
  [MENU_PATH]: "/test"
}

// 2.被捕获 暴露的route信息  优先级比上面高
export const route = {
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : "test",
  [MENU_PATH]: "/test"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

TIP

若页面是与菜单栏上的路由信息是一一对应的话,以上的route添加的信息只需要MENU_PATH属性即可,因为其余属性会与菜单信息一起合并,MENU_KEY,MENU_TITLE等等都会有,不需要添加太多信息,若想覆盖菜单的title等信息,可以追加进去,因为页面路由列表信息优先级高于菜单配置信息

浏览器访问 http://localhost:3000/react-ant-admin/test 即可

为啥新增了显示403?

因为路由(也就是菜单)是与用户(权限)绑定的。新增后也需要新增路由(也就是菜单)权限,关闭当前页面,或者退出登录。再次进入即可进入新增页面。