React学习，使用create-react-app创建项目小记

1.使用create-react-app创建一个项目后，根据要求修改index.js和APP.js文件

index.js

BrowserRouter拼接路径时没有#，刷新页面state值不会消失

HashRouter拼接路径时有#，刷新页面state值会消失

create-react-app创建项目时没有选择react版本所以第一次创建出来的index里面的写法是react18的，需要自己修改成自己会的版本，从之前的项目里面粘贴一下就行，同时修改package.json里面的react版本

APP.js

只放了注册路由，页面会根据URL找到对应的路由进行渲染

exact参数代表路径完全匹配，不写默认为false

Redirect意思就是如果url不匹配任何路由时，跳转的路径

Login.js页面使用的是antd

使用npm install antd@版本号 --save --legacy-peer-deps安装

--save代表保存到package.json文件中

--legacy-peer-deps无视警告，依赖

请求后端方式选择的是axios

request.js

可以封装URL

请求拦截，返回拦截个人理解就是发送请求前可以增加一些逻辑处理和接口返回没有到then()前增加一些逻辑处理，比如加解密，返回错误信息，停止业务逻辑等

登录成功后会通过history.push进入平台页面，依然使用antd中Layout, Menu写的

Menu中items参数填写的是采单的层级，此处我用的是Link组件写的采单，目的是关联不同的路由

items的参数值定义成useState，随时随地根据不同的权限进行改变

items值获取写成了propessMenu,这里为啥用forEach,不用map，是因为用map需要给一个return,不写eslint一直提醒挺烦的，修改eslint把提醒去了也可以。

内容部分分为三部分，头部，内容，底部

头部可以写一些用户名，退出登录按钮

内容部分仍然写注册路由，这样写路由的目的，是点击采单时Link的to改变URL时，只渲染内容部分，菜单和头部，底部都不会改变，这里数组循环输出时用的map，是因为需要返回Route组件，有返回值采用的map

底部就是申明了

同时在propessRoute，propessMenu方法中分别添加了根据接口返回权限不同，显示不同的菜单

最后看一下routes文件里面是菜单中所有的路由，也就是说除了登录页和主页面的架子都可以写在这里面

主页面的架子也可以写在这里面只不过就需要写成require形式，为啥这么写不知道。。。百度的意思是动态加载啥的，不懂。

component值为页面的名字

componentStr是用来和接口返回值进行对比是否展示此菜单

path路由路径

label菜单名称

icon菜单前面的图表

children当前菜单下有子菜单，这里特别注意，主菜单必须有component，必须要注册路由，否则进入菜单页面的时候会白屏，找不到页面的

完事。

此文章仅供参考，如有不对地方，欢迎指正。