add router

README.md

@@ -1,46 +1,75 @@
-# Getting Started with Create React App
+# EVA Notify
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## 简介
 
-## Available Scripts
+使用微信小程序实现的值班信息查看、维修进度交流系统。
 
-In the project directory, you can run:
+## 功能
 
-### `npm start`
+### 值班情况
 
-Runs the app in the development mode.\
+1. 能看到现在维修状况：有几台正在维修，有几个人值班（空闲状态）
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+2. 能看到自己机器的维修情况：维修进度、评论等
+   1. 使用手机号确定id
 
-The page will reload if you make edits.\
+### 互动
-You will also see any lint errors in the console.
 
-### `npm test`
+1. 提醒：当修好之后会向你发送信息，提醒来取
+2. 线上答疑：协会成员登录账号，看到机主提出的问题可以回答（暂定由值班组长管理）
+   1. 公开答疑仅回复能不能修，更复杂的问题推荐其来204
+   2. 当自己的机器正在维修时，可以与维修人员交流进度和问题等
+   3. （暂定）答疑功能使用预填写工单、工单的评论实现
 
-Launches the test runner in the interactive watch mode.\
+### 信息展示
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+1. 展示协会值班时间（现在是否在值班），若不在值班显示预计值班时间、不值班的原因等
+2. 展示维修流程，包括注意事项等
+   1. 戴尔、Surface等不拆
+   2. 数据备份提醒
+   3. 不收礼物
+   4. 不要在204饮食
+3. （备选）其他语言本地化
 
-Builds the app for production to the `build` folder.\
+### 面向协会成员
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
+1. 权限管理
-Your app is ready to be deployed!
+2. 值班组长签到情况、值班总结等
+3. 显示自己什么时候值班
+4. 提醒事项
+   1. 值班后收拾东西、交接
+   2. 螺丝记得拧上
+   3. 某些东西不要放在维修篮里
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### 对接
 
-### `npm run eject`
+1. 与EVA统一身份认证对接
+   1. 协会成员登录入口
+   2. 个人信息同步
+2. 与Oreo对接
+   1. 维修工单列表查看
+   2. 将预填写工单加入Oreo
+3. 防恶意行为
+   1. 工单填写间隔限制为【1】分钟
+   2. 一个人一天最多能创建【10】个预填写工单
+   3. 黑名单机制
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## UI
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### 主页
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+1. 信息显示
+2. （协会成员）相关信息
+3. 提醒事项
+4. 如何联系到协会
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+### 维修
 
-## Learn More
+1. （面向机主）预填写工单
+2. 维修进度提示
+3. （面向协会成员）维修列表
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### 我的
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. 更改手机号等个人信息（手机号可以填写多个）
+2. （备选）修改用户名、头像
+3. 设置真名（可帮助预填写工单）

package-lock.json

@@ -11,8 +11,10 @@
         "@types/node": "^16.18.88",
         "@types/react": "^18.2.65",
         "@types/react-dom": "^18.2.21",
+        "evergreen-ui": "^7.1.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -2257,6 +2259,11 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.7.4.tgz",
+      "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3255,6 +3262,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3334,6 +3349,17 @@
       "resolved": "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA=="
     },
+    "node_modules/@segment/react-tiny-virtual-list": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/@segment/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.1.tgz",
+      "integrity": "sha512-G01b9DrsQLF+8yFRyyJeZBZkzbFuqILG9C7SFFS+GtTFbjdprkHt0CL0riCPOZfe1ZXiT8z8MaKoWfNhrfUjhQ==",
+      "dependencies": {
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.24.51.tgz",
@@ -3772,6 +3798,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmmirror.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4592,6 +4626,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/asap/-/asap-2.0.6.tgz",
@@ -5581,6 +5623,11 @@
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -5751,6 +5798,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.10.0",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.10.0.tgz",
@@ -6305,6 +6361,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -6383,6 +6448,25 @@
       "resolved": "https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/downshift": {
+      "version": "5.4.7",
+      "resolved": "https://registry.npmmirror.com/downshift/-/downshift-5.4.7.tgz",
+      "integrity": "sha512-xaH0RNqwJ5pAsyk9qBmR9XJWmg1OOWMfrhzYv0NH2NjJxn77S3zBcfClw341UfhGyKg5v+qVqg/CQzvAgBNCXQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "compute-scroll-into-view": "^1.0.14",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/downshift/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -7341,6 +7425,38 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/evergreen-ui": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmmirror.com/evergreen-ui/-/evergreen-ui-7.1.9.tgz",
+      "integrity": "sha512-/2ltUobNMDRfjteUwG6Xbb2N27DgaNCq4gOipPcmU6Z1w6xL3NLTGLKW28hqAcwvxHADr4ExkXMOP8Uu/szefg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "@segment/react-tiny-virtual-list": "^2.2.1",
+        "@types/react-transition-group": "^4.4.0",
+        "arrify": "^1.0.1",
+        "downshift": "^5.2.0",
+        "fuzzaldrin-plus": "^0.6.0",
+        "humanize-plus": "^1.8.2",
+        "lodash.debounce": "^4.0.8",
+        "lodash.differencewith": "^4.5.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.merge": "^4.6.2",
+        "lodash.omit": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "prop-types": "^15.6.2",
+        "react-fast-compare": "^3.2.0",
+        "react-transition-group": "^4.4.1",
+        "ui-box": "^5.4.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
@@ -7948,6 +8064,11 @@
       "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
+    "node_modules/fuzzaldrin-plus": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/fuzzaldrin-plus/-/fuzzaldrin-plus-0.6.0.tgz",
+      "integrity": "sha512-srIDThJHkdp3aPwJpR/HNzYZCRJwm07b/igxseoHSB7qR8e/gQp4F6lMGknE3TQI1Aq14TiFf/wzrHOp9LY/EA=="
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -8469,6 +8590,14 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/humanize-plus": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/humanize-plus/-/humanize-plus-1.8.2.tgz",
+      "integrity": "sha512-jaLeQyyzjjINGv7O9JJegjsaUcWjSj/1dcXvLEgU3pGdqCdP1PiC/uwr+saJXhTNBHZtmKnmpXyazgh+eceRxA==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/husky": {
       "version": "9.0.11",
       "resolved": "https://registry.npmmirror.com/husky/-/husky-9.0.11.tgz",
@@ -8481,6 +8610,11 @@
         "node": ">=18"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8600,6 +8734,14 @@
       "resolved": "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz",
+      "integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==",
+      "dependencies": {
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -8992,6 +9134,14 @@
       "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmmirror.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -11524,6 +11674,16 @@
       "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.differencewith": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz",
+      "integrity": "sha512-/8JFjydAS+4bQuo3CpLMBv7WxGFyk7/etOAsrQUCu0a9QVDemxv0YQ0rFyeZvqlUD314SERfNlgnlqqHmaQ0Cg=="
+    },
+    "node_modules/lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg=="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11534,6 +11694,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmmirror.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -11550,6 +11715,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww=="
+    },
     "node_modules/log-update": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/log-update/-/log-update-6.0.0.tgz",
@@ -14093,6 +14263,11 @@
       "resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
@@ -14106,6 +14281,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14178,6 +14383,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmmirror.com/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
@@ -16395,6 +16615,22 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/ui-box": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/ui-box/-/ui-box-5.4.1.tgz",
+      "integrity": "sha512-5p+b6kSh1q/bptvLANuAusyB/3fGIvnw8w6rSZNPHckQ8UdPfjIK4DvinmMXRKgdniOba22h8ypVqtkJ9zK/iQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.7.1",
+        "inline-style-prefixer": "^5.0.4",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -9,8 +9,10 @@
     "@types/node": "^16.18.88",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
+    "evergreen-ui": "^7.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -1,9 +1,13 @@
-function App() {
+import { Component, ReactNode } from 'react';
-  return (
+import { Route, Routes } from 'react-router-dom';
-    <div>
-      <p>Hello</p>
-    </div>
-  );
-}
 
-export default App;
+export default class App extends Component {
+  render(): ReactNode {
+    return (
+      <Routes>
+        <Route path='/' element={<p>Main</p>} />
+        <Route path='/hello' element={<p>Hello</p>} />
+      </Routes>
+    );
+  }
+}

src/index.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );