一、基础路由

import type { IRoute } from 'umi';
const routes: IRoute[] = [
  { path: '/', component: '@/pages/index' }
export default routes;
.umirc.ts这个文件内引入
 简单介绍下这个文件：umi的配置文件，参考官方文档
 
import { defineConfig } from 'umi';
import routes from './config/routes';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  // 设置hash地址
  history: {
    type: 'hash'
  routes: [
    ...routes
  fastRefresh: {},
全局路由layouts
 
 
src下新建文件夹layouts/index.tsx
 
 
再新建几个页面
 
 
 
children就是子页面的输出，类似vue的router-view
 
 
页面建好后，下面是layouts和routes的配置
 
 
layouts/index.tsx
 
import type { IRouteComponentProps } from 'umi';
import Header from '@/components/Header';
import LeftMenu from '@/components/LeftMenu';
const Layout = ({ children }: IRouteComponentProps) => {
  return (
      <Header />
      <div className='flex flex-1'>
        <LeftMenu />
        <div className="flex-1">
          { children }
export default Layout;
config/routes.tsx
 
import type { IRoute } from 'umi';
const routes: IRoute[] = [
  { path: '/login', component: '@/pages/login' },
  { path: '/', component: '@/layouts/index', exact: false, 
    routes: [
      { path: '/', component: '@/pages/home', exact: true },
      { path: '/personal', component: '@/pages/personal', exact: true },
      /* 动态路由 */
      { path: '/details/:id?', component: '@/pages/details/[id$]', exact: true },
      { component: '@/pages/404' },
export default routes;
动态路由简单配置，项目中可加可不加， routes里的配置看上面代码块
 
 
新建details页面，文件名（以id为地址栏参数）：[id$].tsx
 
 
 
跳转方法
 
 
history.push(`/details/${123}`);
页面内获取地址栏参数
 
import { useParams } from 'umi';
const Details = () => {
  const { id } = useParams<any>();
  console.log(id); // 123
  return (
    <div>详情页动态路由</div>
export default Details;
                    一、基础路由项目根目录下新建文件夹：config/routes.tsx （umi约定，位置不能错，不然引入会报错）routes.tsximport type { IRoute } from 'umi';const routes: IRoute[] = [  { path: '/', component: '@/pages/index' }];export default routes;.umirc.ts这个文件内引入简单介绍下这个文件：umi的配置文件，参考官方文档impo
配置式路由：开发者需要单独创建一个配置文件，通过各种属性或方法来实现对路由规则的配置；
约定式路由：开发者不需要手动配置，只需要按照 umi 的规则来创建路由目录和文件，umi 会自动根据文件目录将路由配置解析出来；
当项目中的路由结构比较简单，就可以使用约定式路由。如果是比较复杂的项目，都建议使用配置式路由。
一、路由模式
umi 项目中的路由模式默认是 history 模式，可以通过 history 属性来切换路由模式：
import { defineConfig } f
				
抱歉各位，本项目已经停止维护，为了不给您使用造成问题，请仅做参考使用，感谢各位支持
后续将会以我现在建造的h5框架重新开放，再次感谢各位的支持。
umi-dva-antd-mobile
该项目主要以 + 为一体框架，以为UI组件库，包含完整的前端工程化实践。
部分代码及功能参考于
 :clapping_hands:已经支持微信开发，相见分支。
|-- config                                # umi 配置，包含路由，构建等配置
|-- mock                                  # 本地模拟数据
|-- public              
如果umi -v 无法显示版本号, 检查下是否是npm 或者yarn全局安装, 是否配置了环境变量
 umi 通过create-umi 来提供脚手架能力  创建项目有两种形式, 一种是是命令行  一种是使用GUI
首先介绍命令行创建项目
执行以下命令开始创建项目
npm creat umi
可以选择以下几个项目 
project，通用项目脚手架，支持选择是否启用 TypeScript，
				
基于umi + dva + typescript + mock的React框架
一个开发框架，目前包含工具+路由，已经包含了react，redux，router，不包含数据和视图。
 基于 ， 和的轻量级前端框架。
  JS的强类型版本
UI库任选或
用做代码规范
umi内置功能，默认开启，无需单独配置
npm install
npm run dev
npm run build
├── /dist/             # 项目输出目录
├── /mock/             # 数据mock
├── /src/         
技术栈简介
react@16.8.6 ：用于react@16.8.6用户react@16.8.6的MVVM框架
umi@2.8.7 ：可插拔的企业级react应用框架
dva@2.4.1 ：基于redux和redux-saga的数据流方案
antd@3.21.4 ：基于Ant Design设计体系的React UI组件库
Ant Design Pro@v4 ：一个企业级中后台前端/设计解决方案
Axios@0.19.0 ：一个基于promise的HTTP库
UForm@0.3.10 ：中后台领域的表单解决方案
typescript@3.5.3 ：Javascript的超集
主要目录结构
├── config                       # umi 配置，包含路由，构建等配置
├── src							
				
一、路由
路由有三种方式，分别是，约定式路由(即文件路由，根据文件名自动配置)、编译时配置式路由(config/config.js中配置)和运行时配置式路由(src/app.js中配置)
1、约定式路由
注意：若 .umirc.(ts|js) 或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用编译时配置式路由
约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出
import { defineConfig } from 'umi'; // 用于校验和提示用户配置类型  配置ts提示
export default defineConfig({
  nodeModulesTransform: { // 设置node_modules目录下依赖文件的编译方式
    type: 'none', // 不全部编译，可通过 exclude 配置添加额外需要编译的
  routes: [ // 配置路由  格式为路由信息的数组
				
还记得上一次写React项目还是写的class component，不知不觉，React已经进入了使用hooks的时代。今天，就先跟大家分享说明一下项目中常用的配置，以后时间再写一篇关于hooks的专题文章。
很久没有写文章了，如有问题欢迎留言评论，也请朋友们多多包涵！
先来一波官方文档链接：
UmiJS官方文档
React官方文档
Ant Design官方文档
一、项目搭建
对于react umi项目搭建，umi官方文档已经写的很清晰了，具体请查看上面的umi官方文档链接。这里我不再详细说明，着重说明一些
				
React Umi是一个开箱即用的企业级前端应用框架，它具有丰富的功能和强大的扩展性。在使用React Umi开发应用程序时，可以使用动态路由来提高应用程序的灵活性和适应性。
动态路由是指在应用程序运行时根据需要动态生成路由配置。在React Umi中，可以通过使用约定路由和配置路由两种方式生成路由配置。约定路由是指根据文件和文件夹的命名规则自动生成路由配置，而配置路由则是通过手动配置一个路由表来生成路由配置。
在使用动态路由时，可以根据需要传递参数来生成不同的路由，从而在应用程序中实现不同的功能。例如，可以在路由中添加查询参数来使页面根据不同的参数呈现不同的数据。另外，还可以结合程序运行时的实际情况来动态生成路由，从而提高应用程序的灵活性和可扩展性。
总之，React Umi的动态路由功能是一个非常强大的工具，在实际开发中可以大大提高应用程序的灵活性和适应性，使开发过程更加高效和便捷。