网站建设 之 umi路由

约定式路由

启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件，约定 pages 下所有的 (j|t)sx? 文件即路由

在dva中，处理数据流的文件统一放在 models 文件夹下，每一个文件默认导出一个对象，里面包含数据和处理数据的方法，通常我们称之为 model 。

umi 会根据 pages 目录自动生成路由配置。

umi 里约定，带 $ 前缀的目录或文件为动态路由。

如果是在Layout这里注入，那么，page的index，emmmm，最好一开始就注入home才好，那么接下来就要搞注入了。

React 的组件可以定义为 函数（React.FC<>）或class（继承 React.Component） 的形式。

我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

简单来说，不知道用什么组件类型时，就用 React.FC。

React.PureComponent 与 React.Component 几乎完全相同，也包括render,生命周期等等。但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新

• 建一个 locales 目录，就拥有了国际化
• 建一个 models 目录，就拥有了数据流
• 建一个 mock 目录，就拥有了数据 mock
• 建一个 access.ts 文件，就拥有了权限策略

• Import “所有” from Umi。通过插件扩展 import from umi 的能力

注意不要提交 .umi 目录到 git 仓库，这些是临时文件，它们会在 umi dev 和 umi build 时被删除并重新生成。

里面最重要的文件是.umirc.ts配置文件，在里面可以配置各种功能和插件，umi支持不同环境读取不同的配置文件

需要注意的是，满足以下任意规则的文件不会被注册为路由，

• 以.或_开头的文件或目录
• 以d.ts结尾的类型定义文件
• 以test.ts、spec.ts、e2e.ts结尾的测试文件（适用于.js、.jsx和.tsx文件）
• components和component目录
• utils和util目录
• 不是.js、.jsx、.ts或.tsx文件
• 文件内容不包含 JSX 元素