React18完成一个信息管理系统

2022-7-7：最近做新的项目，经常会参考这个项目的代码，发现有一些可以改善的地方，新更新的内容有提到。等把APP做好，会重新整理后台的代码，并发到github，有问题的话欢迎大家评论~仓库地址在上一篇文章有。

本项目使用了react18，antd4，react-router-dom: "^6.3.0"，redux: "^4.2.0"。用于个人项目“我讲给你听”景点讲解APP。API接口是自己使用node.js+mysql完成，功能比较简单，源代码在上一篇文章http://t.csdn.cn/o8aST 《学习笔记-响应式布局，fetch，canvas，node.js》最后部分。

项目初始化可以百度一篇react项目初始化跟着做或者按照官网，本项目是使用create-react-app和npm。本项目目录结构：

目录

1、登录注册

2、路由配置

3、通过左侧导航栏跳转不同页面

4、less文件、样式

5、redux

6、表单组件动态渲染

---

1、登录注册

        封装了读写localstorage函数在js/util.js，axios在js/request，将读取到的内容存到localStorage，将数据发送到接口，成功的话useNavigate()跳转页面，使用antd表单form的onValuesChange接口，检测到用户输入时将保存的数据自动填入。

2、路由配置

App.js  使用了useRoutes，useRoutes传入的第一个参数是路由信息，需要传对应的组件进去。

index.js  这里要注意！react18更改了，可以看官网的代码。因为有使用redux，全局引入store，不用多次声明。

官网对Provider的说明：

The <Provider> component makes the Redux store available to any nested components that need to access the Redux store.

Since any React component in a React Redux app can be connected to the store, most applications will render a <Provider> at the top level, with the enti