• Umi 相关


    1. 安装(下载)

    1. 创建好一个文件夹,打开命令行工具 输入$ yarn create @umijs/umi-appnpx @umijs/create-umi-app
    • 这一步操作是下载 package.json 文件,用于 npm 下载依赖.
    1. npm install 下载依赖(nodemodules)
    2. npm start 启动项目

    2. 路由

    1. .umirc.ts 文件中用来配置路由组件.

    配置路由

    1. umi.ts文件中,配置 routes属性.
    routes: [
        { path: '/', component: '@/pages/index' },
    ],
    

    约定路由

    1. .umirc.ts 文件中的下面配置注释了以后就默认使用 约定路由
    routes: [
        { path: '/', component: '@/pages/index' },
    ],
    

    注意:

    1. 使用约定路由,在 pages 文件中创建好组件以后,就会自动配置好路由.
    2. 使用约定路由时,已经要将 routes属性给注释了,要不创建的 tsx组件不会生效.

    3. pages 文件 (src文件下)

    1. 该文件用于存放路由组件.
    2. 二级路由需要在该文件下(pages)重新创建一个以一级路由命名的文件夹.
    3. 使用 嵌套路由的时候,一定要在文件夹中创建一个 _layout.tsx文件.
      • _layout.tsx 文件就表示需要嵌套组件的父组件.
    4. 在创建好的二级文件夹下,创建需要嵌套的路由组件

    图解

    在这里插入图片描述

    注意:

    1. 使用嵌套路由的时候,一定要在父组件中使用 props.children插槽 ,用来显示嵌套的子组件.

    4. 全局 layouts(src文件下)

    1. 可以将 声明式路由导航 放在该文件夹下的 index.tsx 文件中
    2. 一定要在 该文件中的组件中留好 props.children 插槽,用来显示子组件.

    5. 动态路由(路由传参)

    1. 如果跳转的路由需要传递参数,就在 pages 文件夹下创建一个新的文件夹,表示需要跳转的路由。
    2. 在新创建的路由下创建一个 [参数名].tsx 文件,中括号里面的 变量就是需要传递的参数名.
    
    // 当前组件点击跳转事件
     onClick={() => props.history.push(`/details/${item.filmId}`)}
    
    // 文件路径 pages/details/[cocoId].tsx 
    console.log(props.match.params.cocoId)
    
    

    6. 路由模式 (hash browser)

    1. 在 .umirc.ts 文件中通过 history 配置项来配置.
        export default defineConfig({
        nodeModulesTransform: {
            type: 'none',
        },
        // routes: [
        //   { path: '/', component: '@/pages/index' },
        // ],
        fastRefresh: {},
        history: {
            type: 'hash',
        },
        });
    

    7. umi 复杂组件传值

    1. src 目录下创建一个 models 文件,用于存放公共状态管理.
    2. 在需要用到公共状态管理的组件,使用 connect(()=>{return {}})(components) 高阶函数包裹 组件.
    3. 传递状态: props.dispatch({type:reducers中定义的方法,payload:传入公共状态})
    4. 接收状态: connect((state)=>{return {name:state.命名空间.需要的属性}})(components)
    导出一个对象,该对象有如下几个属性:
    
    export default {
    	namespace: '',            string,命名空间,通过它来区分调用的哪一个模块的状态管理
    	state: {},                object,初始化状态,用于渲染视图
    	reducers: {},             function-object,同步方法,用于修改初始化状态
    	effects: {},			  function-object,异步方法,用于请求接口,然后调用同步方法修改数据
    	subscriptions: {}         function-object,生命周期,应用启动时调用定义好的方法
    }
    
    
  • 相关阅读:
    01_SpringBoot简介及项目搭建
    八股文第六天
    【CV】第 6 章:图像分类的实际方面
    Jenkins汉化设置
    数据库操作语言:DML(data management lauguage)
    Unity中location和rotation赋值和更改
    Spring中的事务管理
    数据结构-哈希表(散列表)
    正则表达式(常用最新版)
    NXP i.MX8系列平台开发讲解 - 1.1 导读前言
  • 原文地址:https://blog.csdn.net/i_Satan/article/details/126963295