创建一个页面

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={
  tile : "test页面",
  key : "test",
  path: "/test"
}

// 2.被捕获 暴露的route信息  优先级比上面高
export const route = {
  tile : "test页面",
  key : "test",
  path: "/test"
}

TIP

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

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