## 新建页面
1. 进入src/pages目录新建Platform/Demo文件夹以及Demo.js文件
![](https://box.kancloud.cn/bdd52bb44b0f9db3ef39339ed5e4ead9_1708x1044.png)
2. Demo.js是一个最简单的页面文件
## 代码讲解
1. 前两行作用是从 `react` 和`antd`模块引入所需的 `React` ,`PureComponent`,`Form`。
2. `@Form.create()`是一种装饰器,可以将后续讲到的Form组件所需的元素引入并调用。
3. `class Demo extends PureComponent`使用了语法糖,提高代码的可读性,其目的是创建一个`类` ,可供外部直接引用。
4. `render()`方法是重点,返回了页面主要呈现的元素,后期我们构建页面也是在这个方法里编写。
5. `export default Demo`则是将编写的Demo导出,供其他模块引入、发现。
## 创建路由
1. Sword工程使用了umi的配置型路由,每个页面都对应一个路由,配置好之后即可访问
2. 找到config/router.config.js文件
![](https://box.kancloud.cn/a55f7e28b4cf5c90e8ee8537fd730dde_732x296.png)
3. 在文件底部增加如下配置
![](https://box.kancloud.cn/bcd1fc159ba27c8c3dec4e93c13b523a_2440x1176.png)
## 路由讲解
1. 最外层的path代表路由访问地址,我们可以把他看成菜单的顶层
2. 最外层的routes代表此大模块下所有的路由信息
3. routes下的path代表子路由的地址
4. redirect代表访问path对应的路由后会跳转至redirect里配置的路由地址
5. component代表路由对应的文件地址,访问后则会加载出对应的页面,结尾的Demo.js可以简写成Demo
## 启动系统
1. 启动系统,登陆后在地址栏加上 /platform/demo,发现路由地址变成了/platform/demo/list,redirect配置生效,页面上也看到了我们所编写的`测试页面`四个字
![](https://box.kancloud.cn/5d1d6f7f65b55f22a06ab4fe72094333_1644x896.png)
2. 修改文字,查看系统不用重启,页面已经自动刷新成功
![](https://box.kancloud.cn/82155e12f968b68af397d50eceba11dd_926x426.png)
![](https://box.kancloud.cn/2a029b2cac88fda968fe1dab1e30b242_858x642.png)
## 后续
第一个页面我们新增成功了,那么下一章让我们来学习下如何引入Ant Design的组件并简单使用