前置条件
在开发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字段。