17、前端任务管理应用的构建与测试

前端任务管理应用的构建与测试

1. 主应用创建

在开发任务管理应用时，我们需要对应用的路由进行合理配置，以实现不同页面的导航。以下是一些关键路由及其功能：
| 路由 | 功能 |
| — | — |
| /login | 渲染登录页面，若用户未登录或会话过期将被重定向至此 |
| /tasks | 渲染未过滤的任务列表 |
| /tasks/project/:projectId | 渲染按项目过滤的任务列表，URL 中的 :projectId 为项目 ID |
| /tasks/pending | 渲染用户的待办任务列表 |
| /tasks/completed | 渲染用户的已完成任务列表 |
| /users | 渲染包含应用中注册用户列表的页面 |

为了提升用户体验，我们可以在应用抽屉中添加导航链接。编辑 src/layout/MainDrawer.js 文件，添加以下代码：

<Item disableTooltip={drawerOpen} Icon={InboxIcon} title='Todo' 
to='/tasks/pending'/>
<Item disableTooltip={drawerOpen} Icon={CheckIcon} 
title='Completed' t