ant design pro 跳转新页面 修改功能

2023-10-26

ant design pro 修改功能跳转新页面

背景

在官方提供的例子中 是以弹窗的形式做的修改和新增,在项目中如果遇到 采集项数较多,会在修改页面添加别的功能的情况下 弹窗满足不了此需求了。

例子

页面跳转

先说修改页面吧, 需要在路由配置此页面路由,修改页面会带着此条数据中的唯一标识id。
	// 这是列表页的路由配置
	{
		path: '/pages/data-table',
		name: 'datatable',
		component: './PageElement/CommonTable',
	},
	// 修改页的
	{
		path: '/pages/data-table-modify/:id',
		name: 'tablemodify',
		component: './PageElement/CommonTableModify',
		hideInMenu: true,
	},

在这里插入图片描述

// 点击修改按钮
modifyItem = (record) => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: `/pages/data-table-modify/${record.key}`
    }))
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ant design pro 跳转新页面 修改功能 的相关文章

  • 函数式组件与类组件有何不同?

    与React类组件相比 React函数式组件究竟有何不同 在过去一段时间里 典型的回答是类组件提供了更多的特性 比如state 当有了Hooks后 答案就不再是这样了 或许你曾听过它们中的某一个在性能上的表现优于另一个 那是哪一个 很多此类
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • 对useReducer的理解

    useReducer是React提供的一个高级Hook 它不像useEffect useState useRef等必须hook一样 没有它我们也可以正常完成需求的开发 但useReducer可以使我们的代码具有更好的可读性 可维护性 可预测
  • 【前端】react-markdown配置解析

    文章目录 react markdown基本配置 同步预览配置 MdEditorComponent js reducer js initBlogState js action types js sync actions js store js
  • 【React】路由(详解)

    目录 单页应用程序 SPA 路由 前端路由 后端路由 路由的基本使用 使用步骤 常用组件说明 BrowserRouter和HashRouter的区别 路由的执行过程 默认路由 精确匹配 Switch的使用 重定向路由 嵌套路由 向路由组件传
  • Web启动项目走Https协议(Webpack版,Umi版和Host代理版)

    需求 Web项目的启动 一般是默认的http协议 在某些业务需求时 需要走https来调试 Webpack版本 只需在webpack的devServer中配置就可以了 devServer host 0 0 0 0 port 8080 htt
  • 如何在 Ubuntu 20.04 上使用 React 前端设置 Ruby on Rails v7 项目

    作者选择了电子前沿基金会接受捐赠作为为捐款而写程序 介绍 红宝石 on Rails是一个流行的服务器端 Web 应用程序框架 它为当今网络上存在的许多流行应用程序提供支持 例如GitHub Basecamp 声云 Airbnb and Tw
  • 配置使用Eslint的时候 版本错误 "eslint": "5.6.0" a different version of eslint was detected higher up in the tr

    1 如果你也遇到下面的问题 你可以 按照命令行提示的那样 下面这四步完成的一般就可以了 但是不排除你在运行的时候忘记下载某些依赖 1 删除 package lock json 不是package json 你可以选择 yarn lock 或
  • chrome浏览器安装redux-devtools调试工具

    chrome浏览器安装redux devtools调试工具 1 点击进入https www chromefor com 2 在搜索框搜索redux 3 找到最新版本 Redux DevTools v2 17 0 进行下载 4 选择下载线路
  • 【Ant Design】Form.Item创建自定义表单

    一 概述 Antd是一个非常强大的UI组件库 里面的Form表单组件也基本能满足我们大多数场景 但是也有需要自定义表单的场景 Vue2里我们使用v model 结合子组件的model属性 来实现自定义组件的双向绑定 Vue3里我们使用v m
  • Vite搭建react+ts项目

    创建一个react项目 首先需要打开终端 进行vite的引入 yarn create vite 使用react模板创建项目 yarn create vite react test template react cd react test y
  • React中使用if else 条件判断

    在react中用jsx渲染dom的时候经常会遇到if条件判断 然而在jsx中竟是不允许if条件判断的 以下有几种判断方式 可以根据自己的应用场景 挑选适合的 方案一 class HelloMessage extends React Comp
  • React的超详细讲解

    React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器 module bundler 当 webpack 处理应用程序时 它会递归地构建一个依赖关系图 dependency
  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a
  • hook中使用ref使用

    对于antd的fom表单 hook使用ref import React useState useEffect useRef from react const dateRef useRef dateRef current setFieldsV
  • Umi+Dva初印象<基础应用,结构,流转逻辑>

    目录 前言 知识储备 generator函数 Dva初识 实际交互 函数式组件 class组件 前言 项目初始为umi脚手架进行初始化 lt 初始化过程 http t csdn cn cuTaY gt 工程中加载了umi自带的antd ui
  • ant design pro 代码学习(七) ----- 组件封装(登录模块)

    以登录模块为例 对ant design pro的组件封装进行相关分析 登录模块包含基础组件的封装 组件按模块划分 同类组件通过配置文件生成 跨层级组件直接数据通信等 相对来说还是具有一定的代表性 1 登录模块流程图 首先 全局了解一下登录模
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

随机推荐

  • ESP8266_12 ESP8266客户端模式下的TCP通信

    ESP8266 01搭建开发环境 ESP8266 02程序的编译与下载 ESP8266 03SDK与Makefile的基本用法 ESP8266 04管脚控制与软件定时器 ESP8266 05 ESP8266有几个串口 ESP8266 06硬
  • java 回调函数解读

    模块间调用 在一个应用系统中 无论使用何种语言开发 必然存在模块之间的调用 调用的方式分为几种 1 同步调用 同步调用是最基本并且最简单的一种调用方式 类A的方法a 调用类B的方法b 一直等待b 方法执行完毕 a 方法继续往下走 这种调用方
  • LaTex学习笔记(文档基本结构、编译与特殊符号)

    1 文章开始 文章第一句通常为 documentclass article book report letter等 documentclass x 作为文章排版的依据 x代表排版方式 基本的排版方式有 article 用于文章排版 book
  • epoll与select区别

    select和epoll的区别 面试常考 首先select是posix支持的 而epoll是linux特定的系统调用 因此 epoll的可移植性就没有select好 但是考虑到epoll和select一般用作服务器的比较多 而服务器中大多又
  • BP神经网络参数总结

    BP神经网络参数总结 BP神经网络是一种常用的人工神经网络模型 广泛应用于分类 回归和模式识别等任务中 在进行BP神经网络训练之前 需要对网络的参数进行设置和调整 以获得更好的性能和准确度 下面将对BP神经网络的参数进行总结 并给出相应的源
  • 【线程】详解线程状态(到底是五种还是六种)

    首先我们要知道 在传统 操作系统 的线程模型中线程被分为五种状态 在java线程中 线程被分为六种状态 传统线程模型 操作系统 中线程状态 线程的五种状态 1 新建 new 创建了一个新的线程对象 2 就绪 runnable 调用线程的st
  • python 置信区间_关于置信区间的完整指南和Python示例

    python 置信区间 Confidence Interval CI is essential in statistics and very important for data scientists In this article I w
  • Python Flask 搭建微信小程序后台详解

    前言 近期需要开发一个打分的微信小程序 涉及到与后台服务器的数据交互 因为业务逻辑相对简单 故选择Python的轻量化web框架Flask来搭建后台程序 因为是初次接触小程序 经过一番摸索和尝试 个人觉得的微信小程序与后台的交互有点像aja
  • 矩阵乘法测试

    对于时间的函数 gettimeofday 函数使用方法 http blog csdn net hurmishine article details 60326345 矩阵乘法测试 代码 1 为了试验简单 两个测试矩阵均为n n 当然结果也为
  • C++中的各种进制转换函数汇总

    1 在C中 按指定进制格式输出如下 include
  • shell脚本——shell函数详解

    shell脚本 shell函数详解 一 shell函数 1 shell函数的概念 2 shell函数的格式 1 函数的定义 2 调用函数的方法 3 函数返回值 4 函数传参 5 函数变量的作用范围 6 递归 函数调用自己本身的函数 1 阶乘
  • 【MFC】列表视图控件——List Control

    01 文章目录 文章目录 01 文章目录 02 List Control介绍 03 List Control的通知消息 04 List Control的相关结构体 05 List Control的创建 06 CListCtrl类的主要成员函
  • 0-1背包问题

    题目描述 有n件物品和一个容量为v的背包 第i件物品的重量是w i 价值是p i 求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量 且价值和最大 算法分析 动态规划的题目一直是比较有难度 这种题目炸看往往连个思路都没有 往往需要数
  • expect 使用实例

    自动登录一台 服务器 代码 root localhost D151SP160 cat test1 exp bin expect set timeout 2 set user name lindex argv 0 set mypassword
  • Delphi转Java开发的辛酸

    工作已经快两年了 回想起以前的选择 真是让人不是滋味啊 通过近段时间的仔细思考和对自己以后职业规划 现在越来越想往JAVAWEB方向发展 想了许久 我还是决定辞职 放弃现在这份安逸的工作 易然的选择做JAVA这边道路 今天刚刚出来面试 就让
  • 数据结构-哈希-哈希表实现

    哈希表实现 一 哈希概念 哈希概念 常见哈希函数 哈希冲突 哈希冲突的解决 二 闭散列实现 闭散列的结构 插入 查找 删除 闭散列总结 三 哈希桶实现 哈希桶的结构 插入 查找 删除 析构 拷贝构造 赋值运算符重载 四 哈希表总结 开散列与
  • 安装windows版caffe

    MATLAB操作caffe框架 安装之前先谈谈我的电脑硬件配置 Qudra K600 的GPU 计算能力是3 0 你在安装之前也要搞清楚自己的GPU显卡是什么 看看到底支持不支持CUDA 如果支持 要查查计算能力是多少 后面配置参数要用到
  • windows环境下查看Python的安装路径

    1 windows r 进入cmd命令 2 查看python安装路径 where python
  • 常见的几种Sort排序算法

    几种常见的Sort排序算法 1 排序的基本概念 有n个记录的序列 其相应关键字的序列是 相应的下表序列是 通过排序 要求找出当前下标序列的一种排列 使得相应的关键字满足如下的非递减 或非递增 关系 这样就得到一个按关键字有序的记录序列 该文
  • ant design pro 跳转新页面 修改功能

    ant design pro 修改功能跳转新页面 背景 例子 页面跳转 背景 在官方提供的例子中 是以弹窗的形式做的修改和新增 在项目中如果遇到 采集项数较多 会在修改页面添加别的功能的情况下 弹窗满足不了此需求了 例子 页面跳转 先说修改