卡比图床项目——项目搭建

项目搭建

使用react完成本项目 create-react-app kabi-img搭建项目

cd kabi-img进入项目目录， 运行yarn start可以进行本地预览

搭建目录结构

pages目录存放项目的页面，stores目录存放数据，models模型目录向服务器获取数据，components组件目录放置公用组件。

搭建页面

首先组件部分暂时会有Header和Footer组件，页面会有主页Home，查询历史History，关于页面About。

引入React Router

运行yarn add react-router-dom安装react-router 在index.js中引入BrowserRouter 在App.js中引入Switch（V6中Switch改为Routes），Route Routes 是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件，因此绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route

优化体验

在header里面添加跳转的链接

此外App.js中我们直接引入了诸如Home，History，About这样的大页面，这样加载压力会很大。所以我们要进行分包懒加载 当用户点击首页时只加载首页，其他的页面也同理。

分包懒加载

React中有Suspense，它的字面意思是“悬而不决”，用在平时开发中，就可以理解为还没有完成的事不知道什么时候完成，异步加载组件。

用途

1. 代码拆分服务于打包优化的代码拆分。lazy和suspense配合使用
2. 异步加载数据

具体使用：我们这个项目里面Footer和Header是一开始就要加载的所以是同步请求，Home，History，About可以进行异步请求。

即可实现。