前置条件

在开发helloword页面之前,要确保已经在本地创建了基础前端项目。详见 新建项目

  1. 页面编写
  2. 配置路由
  3. 页面访问

页面编写

在项目的react/routes目录下新建一个新的功能文件夹hello及其相关的JS文件。

  1. $ cd choerodon-todo-service
  2. $ mkdir -p react/routes/hello
  3. $ touch react/routes/hello/index.js
  1. // hello/index.js
  2. import React from 'react';
  3. export default function HelloIndex() {
  4. return 'hello';
  5. }

配置异步路由

react/index.js文件中配置新建文件的访问路径:

  1. // index.js
  2. import React from 'react';
  3. import { Route, Switch } from 'react-router-dom';
  4. import { inject } from 'mobx-react';
  5. import { asyncRouter, nomatch } from '@choerodon/boot';
  6. const HelloIndex = asyncRouter(() => import('./routes/hello'));
  7. function Index({ match }) {
  8. return (
  9. <Switch>
  10. <Route path={`${match.url}/hello`} component={HelloIndex} />
  11. <Route path="*" component={nomatch} />
  12. </Switch>
  13. );
  14. }
  15. export default inject('AppState')(Index);

页面访问

本次demo的访问路径应该为: http://localhost:9090/#/demo/hello

因为在编译自动收集路由配置时,本模块的路由被映射为/demo,也就是在package.json中设置的routeName字段。