前置条件

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

• 页面编写
• 配置路由
• 页面访问

页面编写

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

$ cd choerodon-todo-service
$ mkdir -p react/routes/hello
$ touch react/routes/hello/index.js

// hello/index.js
import React from 'react';
export default function HelloIndex() {
  return 'hello';
}

配置异步路由

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

// index.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { inject } from 'mobx-react';
import { asyncRouter, nomatch } from '@choerodon/boot';
const HelloIndex = asyncRouter(() => import('./routes/hello'));
function Index({ match }) {
  return (
    <Switch>
      <Route path={`${match.url}/hello`} component={HelloIndex} />
      <Route path="*" component={nomatch} />
    </Switch>
  );
}
export default inject('AppState')(Index);

页面访问

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

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