React-Router 在路由更改时重新安装组件

2024-06-26

我有一个连接(到 redux 存储)的组件。我有多个路由都在渲染道具中使用此组件。每次路线改变时,整个组件似乎都被重新安装。有什么办法可以防止这种情况发生吗?我的第一个想法是,我可能每次都会重新实例化组件,因为 render prop 是一个响应路由器调用的函数?这是一些代码:

const routeFunction =
  (resource, props) => <CrudWrapper resource={resource} modelId={props.match.params.id} />

export default crudResources.map(resource => ({
  path: `/${resource}/:id?`,
  link: `/${resource}`,
  resource,
  // eslint-disable-next-line react/prop-types
  render: routeFunction.bind(null, resource)
}));

然后将路由映射到 JSX 中: {routes.map(route => <Route key={route.path} {...route} />)}

我把路线包裹在一个<Switch>并认为这可能是导致问题的原因,但即使在拆下开关后,该组件的componentWillMount每次都会调用方法。


该问题似乎与路线上的关键道具有关。当我省略 key 属性时,组件不会重新安装。一旦我添加它,无论字符串是什么,路由都会重新安装。

EDIT:

这是我的错。由于所有路由都有不同的键,react 会重新挂载它们,因为它们都是不同的。看这里:https://github.com/ReactTraining/react-router/issues/5972 https://github.com/ReactTraining/react-router/issues/5972

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React-Router 在路由更改时重新安装组件 的相关文章

  • 角度单元格 xlsx 着色

    我有一个问题 我想根据一个值在我的 exel 行中添加红色或绿色来下载 如何在工作表中设置指定单元格的颜色 这是处理 exel 格式的 ts 类 表达 import Injectable from angular core import a
  • Javascript 字符串/整数比较

    我在 HTML 中存储一些客户端参数 然后需要将它们作为整数进行比较 不幸的是我遇到了一个我无法解释的严重错误 该错误似乎是我的 JS 将参数读取为字符串而不是整数 导致我的整数比较失败 我生成了一个错误的小例子 我也无法解释 运行时以下返
  • Webpack、Sass - 超出最大调用堆栈大小

    我正在为我的 JS 应用程序使用 Webpack 对于样式 我使用 Sass 我的应用程序非常大 所以我使用了很多 mixins 和 includes 在过去的几天里 虽然应用程序的 SASS 数据增长了一些 我多次遇到相同的以下错误 未捕
  • 获取访客的 Optimizely A/B 测试和变化

    当我在网站上运行实验时 我希望能够找出当前访问者看到的测试和变体 我无法找到如何做到这一点优化Javascript API https www optimizely com docs api 您可以获得第一个正在运行的实验的 ID 假设您有
  • 防止 Node.js 中的 SQL 注入

    是否有可能以与 PHP 具有防范 SQL 注入的预准备语句相同的方式防止 Node js 中的 SQL 注入 最好使用模块 如果是这样 怎么办 如果不 有哪些例子这可能会绕过我提供的代码 见下文 一些背景 我正在制作一个 Web 应用程序
  • 禁用拉斐尔论文上的浏览器上下文菜单

    我有一篇拉斐尔论文定义为R1 Raphael 0 0 800 600 我想在本文中禁用上下文菜单 以便我可以捕获鼠标右键单击事件 我没有这样的Raphael someDiv 800 600 禁用 div 的 oncontextmenu 属性
  • jQuery:“$(this).next().next()”有效,但“$(this).next('.div')”无效

    好吧 我正在尝试将这组信息单独隐藏 这有效 arrow click function this next next slideToggle img class arrow src https via placeholder com 40 h
  • ECMAScript 中定义的内部属性是什么?

    什么是内部属性 http es5 github com x8 6在 ECMAScript 中定义为 规格是什么意思 该规范使用各种内部属性来定义 对象值的语义 这些内部属性不是 ECMAScript 语言 它们是由本规范定义的 纯粹用于说明
  • 为什么 jQuery 对损坏标记的解释与浏览器不同?

    我之前已经回答过这个问题 https stackoverflow com a 19101905 1253312 但我并不完全理解why答案是正确的 答案的要点 p p function jqrender html a href http w
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • 将jQueryUI datepicker附加到div(显示位置错误)

    我在输入上使用 jQueryUI datepicker 默认情况下 jQueryUI 会附加 ui datepicker div to the body该文件的 有问题的输入位于屏幕上的 弹出 div 中 这意味着该 div 之外的任何点击
  • Angular 4 - 具有动态参数值的自定义验证器

    我编写了一个自定义验证器 用于检查日期是否高于某个最小日期 代码如下所示 export function validateMinDate min Date ValidatorFn return c AbstractControl gt if
  • 重复 Pinterest Facebook 邀请功能

    I m trying to duplicate Pinterest s Invite Friends functionality In case you haven t seen what it looks like it looks li
  • 提交外部有 INPUT 的表单,并修改值后

    我有一个form 有几个
  • 从组件刷新/重新加载 ember 路由

    我有一个组件 它实际上是一个模式对话框 当我完成该对话框并按 确定 按钮时 我想留在打开该对话框的停留页面上 这并不难 但问题是该对话框更改了数据 我通过 REST 调用获取数据 因此我需要刷新已经所在的路线以反映数据更改 因为我是从组件中
  • 过滤数据表中的行

    我目前的 JQuery 插件 DataTables 工作正常 并且我在页面顶部插入了一个按钮来进一步过滤列表 我还使用了 DataTables 内置的搜索栏 我希望按钮向下过滤表格 并只显示包含特定值的行 下面是我一直在做的事情 但似乎没有
  • Google Maps API - 调整大小会生成空白区域

    我正在研究一个看起来非常简单的功能 但却引起了一些头痛 我使用 GIS 并将其与 Google 地图集成 其中一位客户要求能够打开一个仅显示地图的单独弹出窗口 打开窗口不是问题 但当我尝试扩展包含地图的 IFrame 的宽度时 为了适应窗口
  • HTML 画布从 getImageData 返回“偏离一些”字节

    我找到getImageDataHTML 画布似乎返回不正确的字节值 我使用以下 Python 代码生成了 1x1 px 图像 from PIL import Image import numpy as np a np array 12 18
  • 为什么我编写的 npm 模块在使用 create-react-app 创建项目后会安装这么多包?

    我写了这个 npm 模块 反应心跳 https www npmjs com package react heartbeat using nwb https github com insin nwb 当我在新项目中安装此模块时 npm i r
  • ASP.NET MVC3 Ajax.ActionLink - 条件确认对话框

    我有一个 Ajax ActionLink 仅当满足某些条件 用户有未保存的更改 时 我才希望显示一个确认对话框 我创建了一个 JavaScript 函数 它根据需要显示确认对话框 并根据响应返回 true 或 false 我将其绑定到 Ac

随机推荐

  • 在 Selenium 中自动执行下拉菜单而不选择

    我正在尝试使用 Selenium 从下拉列表中选择一个元素 我已经能够选择下拉列表 但我不知道如何从下拉列表中选择特定元素 因为该网站不使用 select 因此我无法使用内置的 select 类 作为参考 这是下拉列表中元素之一的 HTML
  • 当执行 Tomcat 的 proxy_pass 时,Nginx 如何添加子域作为参数

    我想要实现的目标Web 应用程序应该能够支持多个子域 而无需在每次使用新子域时对 nginx 或 tomcat 进行任何更改 我已经对 DNS 进行了必要的更改以支持通配符子域 Nginx 监听端口 80 它在端口 8080 上对 tomc
  • CanExecute 何时被调用?

    在演示中 我有一个按钮可以切换布尔字段isAsking 我创建了一个命令 该命令仅在以下情况下执行isAsking true 一旦我按下切换按钮 okButton IsEnable立即更改 这表明该命令发现了更改isAsking 我感到很困
  • MVC 4 文本框未在回发时更新

    我有一个使用 modelview 对象的表单 该对象在提交表单的回发时不会更新文本框值 提交表单时 我编辑绑定到文本框的对象的属性 当表单返回时 对象属性仍然更改 但文本框值不会更改 这就像文本框值被缓存并且不会改变 我该如何解决 文本框默
  • 使关闭图像出现在 DIV 的右上角

    我想知道如何使一个小十字 闭合 图像出现在 div 的右上角 使用 CSS 和 XHTML 谢谢 你可以这样做 jsfiddle net 7JEAZ 1317 http jsfiddle net 7JEAZ 1317 代码片段 panel
  • Java 中的“实现 Runnable”与“扩展线程”

    从我什么时候开始使用线程Java 我找到了这两种编写线程的方法 With 实施Runnable public class MyRunnable implements Runnable public void run Code Started
  • UIView 的变换看起来很糟糕

    我有一个简单的视图和简单的背景 我需要旋转视图及其内容 代码在这里 CGAffineTransform r CGAffineTransformMakeRotation 5 M PI 180 0f backView transform r 我
  • 任意旋转中两条抛物线相交的代码或公式

    我正在研究一个几何问题 需要找到任何旋转中两个抛物线弧的交点 我能够通过旋转平面使弧与轴对齐来相交直线和抛物线弧 但两条抛物线不能同时与轴对齐 我正在努力推导公 式 但我想知道是否有可用的资源 我首先定义没有旋转的二维抛物线弧的方程 x t
  • Django 嵌套查询集

    我有一个像这样的 Django 数据模型 省略数据字段 class Atom Model pass class State Model atom ForeignKey Atom class Transition Model atom For
  • Safari 不会通过 http/2 加载某些资源

    服务器上启用了 Http 2 昨天我注意到在 Iphone IOS 10 2 上未加载某些资源并出现错误 failed to load resource connecting to server is not possible 当我将 Ip
  • Firebase 无法使用类检索数据[重复]

    这个问题在这里已经有答案了 我有一些功能齐全的代码行检索每个数据 但未能使用类检索它们 例如 这些线路运行良好 double value double ds child player1score getValue long value lo
  • 如何模拟 FileReader 的失败

    我有一个函数可以创建一个FileReader 在该函数中我还设置了load and error事件处理程序 handleFileSelect files ArrayLike
  • 如何阻止 Xcode 11 将 CFBundleVersion 和 CFBundleShortVersionString 更改为 $(CURRENT_PROJECT_VERSION) 和 $(MARKETING_VERSION)?

    从版本 11 开始 Xcode 设置了我的CFBundleVersion价值 CURRENT PROJECT VERSION and my CFBundleShortVersionString重视 MARKETING VERSION 每当我
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 我应该如何从非 root Debian Linux 守护进程登录?

    我正在编写一个新的守护进程 它将托管在 Debian Linux 上 我发现 var log 具有仅 root 写入权限 因此我的守护进程无法在那里写入日志文件 但是 如果它写入那里 它似乎将获得自动日志轮转 并且也按照用户期望的方式工作
  • 如何逐步完成 Python 表达式求值过程?

    我想构建一个可视化调试器 它可以帮助编程学生查看表达式求值是如何发生的 子表达式如何求值并被其值 替换 类似于 Excel 中的表达式求值可视化工具 看起来您无法使用 Python 的 pdb 逐步完成此过程 因为其最精细的步骤粒度是代码行
  • C# 属性实际上是方法吗?

    到现在为止 我的印象是Properties Methods在 C 中是两个不同的东西 但后来我做了如下的事情 这对我来说是 大开眼界 我本来期待一处房产stringProp和一种方法stringProp但我得到了这个 为什么会发生这样的事
  • PHP 难以检查数组中的元素是否为整数类型

    我正在尝试检测一个或多个变量是否包含数字 我尝试了几种不同的方法 但并没有完全成功 这是我尝试过的
  • 尝试将无根 Podman + docker-compose + Traefik 与 podman.sock 一起使用时权限被拒绝

    TL DR 尝试通过 podman 套接字将无根 Podman 与 docker compose 一起使用 并使用 Traefik 容器 与 podman 套接字通信 将流量代理到其他容器 与https stackoverflow com
  • React-Router 在路由更改时重新安装组件

    我有一个连接 到 redux 存储 的组件 我有多个路由都在渲染道具中使用此组件 每次路线改变时 整个组件似乎都被重新安装 有什么办法可以防止这种情况发生吗 我的第一个想法是 我可能每次都会重新实例化组件 因为 render prop 是一