首页 > 其他分享 >bug处理--antdesign中umi升级后无法加载子页面

bug处理--antdesign中umi升级后无法加载子页面

时间:2024-07-21 16:31:29浏览次数:13  
标签:const -- Admin props antdesign umi children

bug处理--antdesign中umi升级后无法加载子页面

history

const Admin: React.FC =(props)=> {
	const { children }=props;
	return (
		<PageHeaderWrapper>
        	{children}
		</PageHeaderWrapper>
	);
};

now

升级到 Umi4 后,之前的一些组件不能用了,获取不到 propsprops 是空对象。

Umi4 在代码层做了修改,将 react-router@5 升级到 react-router@6,所以路由相关的一些 api 存在着使用上的差异。

props 默认为空对象,以下属性都不能直接从 props 中取出:

img

改为使用Outlet标签

changes

Admin.tsx

import { Outlet } from 'umi';


const Admin: React.FC =(props)=> {
	const { children }=props;
	return (
		<PageContainer>
        	<Outlet>
        	</Outlet>
		</PageContainer>
	);
};

routes.ts

{
    path: '/admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',

    routes: [
      {
        path: '/admin/user-manage',
        name: '用户管理',
        icon: 'smile',
        component: './Admin/UserManage',

      },
    ],
  },

效果

image

标签:const,--,Admin,props,antdesign,umi,children
From: https://www.cnblogs.com/vastjoy/p/18314612

相关文章

  • 2024年暑期学习 (1)
    2024年“春秋杯”网络安全联赛夏季赛0x00CTFstdout程序保护如下Arch:amd64-64-littleRELRO:PartialRELROStack:NocanaryfoundNX:NXenabledPIE:NoPIE(0x3fe000)这题的难点在于setvbuf(stdout,0LL,0,0LL)操......
  • 2、进程、线程、中断的核心:栈
    1进程、线程、中断的核心:栈中断中断,中断谁?中断当前正在运行的进程、线程。进程、线程是什么?内核如何切换进程、线程、中断?要理解这些概念,必须理解栈的作用。1.1ARM处理器程序运行的过程ARM芯片属于精简指令集计算机(RISC:ReducedInstructionSetComputing),它所用的指令比......
  • 字符串的创建辨析
    字符串的创建辨析Strings="1"*使用引号创建字符串会在常量池中寻找有则直接返回没有则创建Strings=newString("1");*使用new创建如果常量池没有"1"则在常量池中创建"1"再在堆中创建String并返回地址给引用*使用s.intern()如果常量池中没有与字符串相同的字符串(判......
  • Ibert眼图测试与高速接口的介质
    光纤的分类:单模和多模; SRIO和万兆网用普通的电信号作为介质存在着速率上的不足,在这个前提下需要依赖光纤;Ti的LMK系列是目前常用的接收光纤信号的高速收发器器件,这个器件可以将输入转换成数字信号传递给主控芯片;单模光纤内部一般只有一种波长的光:1310nm或1550nm,这种光纤传输......
  • excalidraw 这些用法你肯定不了解
    也算用了很多种的画流程图的软件,但是excalidraw这个工具之前并没有使用过。今天就研究了一下这个工具。excalidraw绘制的流程图会有手绘感,手绘感天生会给人亲切感,放在文章中,会给文章增色不少。excalidraw的网址如下:https://excalidraw.com/excalidraw的基础用法就不说了,说......
  • 封装C项目为dll
    这是头文件,定义了一个接口MyHeader.h。#ifndefMYHEADER_H#defineMYHEADER_H//定义导出DLL函数的宏#defineMY_API__declspec(dllexport)#ifdef__cplusplusextern"C"{ //告诉编译器下面是C语言代码#endif //函数声明 MY_APIint__stdcalladd(intx,inty......
  • vue3 template 特殊的标签
    在Vue.js中,<template>标签是一种特殊的标签,它用于定义组件的模板,但不会直接渲染为HTML元素。它的主要用途是在编写组件和使用插槽时提供灵活的模板定义。以下是关于<template>标签的一些关键概念和使用示例。基本用法组件模板:在单文件组件中(.vue文件),<template>标签用......
  • 1186. 删除一次得到子数组最大和 Medium
    给你一个整数数组,返回它的某个 非空 子数组(连续元素)在执行一次可选的删除操作后,所能得到的最大元素总和。换句话说,你可以从原数组中选出一个子数组,并可以决定要不要从中删除一个元素(只能删一次哦),(删除后)子数组中至少应当有一个元素,然后该子数组(剩下)的元素总和是所有子数组之中......
  • 深入分析 Android ContentProvider (一)
    文章目录深入分析AndroidContentProvider(一)1.Android中的ContentProvider设计说明1.1.ContentProvider的设计初衷1.2.ContentProvider的基本结构1.3.ContentProvider的实现示例:实现一个简单的ContentProvider1.4.ContentProvider的使用2.ContentPro......
  • java基于ssm+vue 药品网购平台
    1用户前台功能模块1.1前台首页前台首页详情页面:首页、药品信息、疫情常识、保健品推荐、个人中心、后台管理、购物车等操作。程序效果图如下图1所示:前台页面等内容,如图1所示。 1.2个人中心在前台页面查看个人中心用户注册、登录,程序效果图如下图2所示:图2个人中心信息......