首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在使用react路由器进行路由后,图标不再加载?

在使用React路由器进行路由后,图标不再加载的原因可能是由于路由导致了组件的重新渲染,而图标的加载是在组件的初始渲染阶段完成的。当路由切换时,原先加载的组件会被卸载,再次切换回来时会重新加载组件,但由于图标已经加载过一次,浏览器会从缓存中读取图标资源,导致图标不再重新加载。

解决这个问题的方法可以是在路由切换时,通过设置key属性来强制React重新渲染组件。可以为路由组件添加一个唯一的key,例如使用路由路径作为key,这样每次路由切换时,组件都会被重新渲染,从而保证图标能够重新加载。

另外,还可以使用React的useEffect钩子函数来监听路由变化,并在路由变化时重新加载图标。可以在useEffect中监听location对象的变化,当路由发生变化时,重新加载图标资源。

以下是一个示例代码:

代码语言:txt
复制
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // 在路由变化时重新加载图标
    // 这里可以写你重新加载图标的逻辑
    console.log('路由变化,重新加载图标');
  }, [location]);

  return (
    // 这里是你的路由组件代码
    // ...
  );
}

export default App;

需要注意的是,以上解决方法是基于React路由器的情况下,如果使用的是其他路由库或框架,解决方法可能会有所不同。另外,具体的图标加载逻辑需要根据你使用的图标库或组件库来确定,可以参考对应库的文档或示例代码来实现图标的重新加载。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

手把手教你如何自定义 React Native 底部导航栏

/app.json"; AppRegistry.registerComponent(appName, () => App); 现在我们想要使用 react-navigation 创建路由器,但是首先我们需要创建一些...默认标签栏支持图标,我们将在本教程中使用 ascii 字符,当然实际应用中可以使用 react-native-vector-icons 或自定义图标字体。...return {icon}; }; export default Icon; 现在我们可以路由器使用这个组件...此外,我们还注意到我们路由器配置中 tabBarOptions 是如何被注入到组件中的。 现在重新编写 TabBar 组件。首先,让我们尝试重新创建默认选项卡栏。...样式应该通过路由器上的 tabBarOptions 配置进行动态编写的,这边不会讲这些,大家自己动手做做。

7.5K20

第二十一篇:从 React-Router 切入,系统学习前端路由解决方案

比如当我点击“About”链接时,就会展示 About 组件的内容,效果如下图所示:  注意,点击 About ,界面中发生变化的地方有两处(见下图标红处),除了 ul 元素的内容改变了之外,路由信息也改变了...这其中,最需要你注意的是路由器这个角色,React Router 曾在说明文档中官宣它是“React Router 应用程序的核心”。...因此学习 React Router,最要紧的是搞明白路由器的工作机制。 3. ...路由器:BrowserRouter 和 HashRouter 路由器负责感知路由的变化并作出反应,它是整个路由系统中最为重要的一环。...我们不妨回到故事的原点,再多问自己一个问题:为什么我们需要 React-Router? 或者把这个问题稍微拔高一点:为什么我们需要前端路由? 这一切的一切,都要从很久以前说起。 4.

34810

高级工程师的晋升之路:如何用 JavaScript 打造十亿级的应用

当我们到达高级阶段,下一步又该怎么走? 一些人可能想进入管理层,但我不认为每个人都希望如此,因为肯定不可能所有人都是经理,对吧?一些人非常擅长工程,为什么不能一辈子干工程呢? ?...(组件级别的懒加载?) 因此,我们不能简单地根据路由进行分割,必须找其他的办法。基于路由的代码分割很容易,因为这是最粗糙的分割方式,更深入的部分可以忽略。...这样就把人的因素排除了系统之外,因为加载是通过渲染自动进行的。 “注水” 这个模型看起来似乎不错,但它需要付出些代价。...因此,我们没有让路由器导入根组件,而是让跟组件声明,自己会增强路由器。 这样,删除一个根组件只需要删除文件就可以了,因为这个根组件不再增强路由器,所以删除根组件需要的唯一操作就是删除文件。 ?...该文件说“嗨路由器,我在这儿,请import我”。显然,这种模式可以用在所有其他东西上。如果你使用GraphQL,并且需要路由器知道数据依赖,那么就可以使用同样的模式。

81820

React Native顶|底部导航使用小技巧

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者ReactNative0.44...好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。 本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。  ...margin: 1 }, indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 就不显示线了..., (这是Android上的默认设置)TabBarBottomTabBarTop tabBarPosition- 标签栏的位置可以是或'top''bottom' swipeEnabled - 是否允许标签之间进行滑动...几个选项被传递到底层路由器来修改导航逻辑: initialRouteName - 首次加载时初始标签路由的routeName order - 定义选项卡顺序的routeNames数组 paths - 将

7.7K60

Next.js 越来越难用了

尽管 Next.js 强烈推荐使用 App Router(应用路由器),但我们也必须认识到,它仍然存在着诸多不足和复杂性,这可能使其并不适用于所有项目。...相比之下,React 官方文档仍持续推荐 Pages Router(页面路由器),并将 App Router 视为前沿技术。...其中,Server Components 的引入使得 React 组件可以服务器端进行渲染,从而减少了需要发送给客户端的数据量。...此时,你不再只是疑惑:“为什么这不起作用?”而是开始思考:“为什么它这样工作……而不是那样?” 不幸的是,App Router 就充满了这样的微妙之处。...因此,我们采取了另一种策略,即暴露 Web 请求 API 中的特定方法,并针对不同的使用场景进行了统一和优化:这些 API 覆盖了组件、服务器操作、路由处理程序和中间件等场景。

6110

下一代前端构建利器——Turbopack

动态路由:处理具有动态参数的路由。通过文件名中使用方括号包裹参数名称,可以路由路径中指定动态片段。...客户端路由:Next.js 使用内置的客户端路由器来处理客户端导航。您可以使用 next/link 组件或 router 对象来实现客户端路由导航。...此模式允许您在不重新加载整个页面的情况下进行导航和页面切换。API 路由:Next.js 还提供了内置的 API 路由模式,使您可以项目中快速创建 API 端点。...不再需要从 Next.js 导入 、 和 。可使用 React 直接编写 html 内容。可以使用内置的 SEO 支持来管理 HTML 元素,例如元素。...Turbopack 与Webpack5进行对比 Turbopack 与Vite SWC dev server方面对比TurbopackReact Components 情况下,性能与vite SWC

24110

为新的Facebook.com重建我们的技术栈

这种方法有问题,它不再适用于我们新的原子化的CSS-in-JavaScript方法,所以我们改用CSS变量来进行主题切换。...中使用SVG,实现快速、单一渲染的性能 为了防止图标在其他内容之后出现闪烁,我们使用 React 将 SVG 内联到 HTML 中,而不是将 SVG 以img的方式显示。...我们发现,加载JavaScript的同时加载这些SVG的好处大于SVG的绘制性能。通过内联,不会出现图标闪烁。...这使得我们可以每一个feed故事准备好,只需进行一次查询操作,就可以将每一个feed故事逐一发送。...路由图和路由器存在应用的最顶端,允许结合当前应用和路由器的状态来驱动应用级的状态决策,例如基于当前路由的顶部导航栏或聊天标签的行为。

1.9K20

React Router入门指南(包括Router Hooks)

这意味着,如果需要在整个应用程序中进行路由,则必须使用BrowserRouter包装更高层的组件。...> ); } const Home = () => ( Home ); 现在,我们的路由不再加载消息...为了获得React Router的全部功能,我们需要有多个页面和链接可以使用。我们已经有了页面(如果需要,也可以使用组件),现在,让我们添加一些链接以能够页面之间进行切换。...现在,React Router不再使用标签和href,而是使用Link来进行切换,而无需重新加载页面。 然后,我们需要添加两条新路线:“关于”和“联系方式”,以便您也可以页面或组件之间进行切换。...我们仍然可以通过用Switch包装路由来告诉React Router一次只加载一条路由来增强它。

12K20

一种基于模块联邦的插件前端

malcolmkee.com/blog/a-plugin-based-frontend-with-module-federation/ 在谈及模块联邦及其独立构建和部署的特性(通常称为微前端)时,一个常见的问题是,“为什么这比使用...这就是为什么模块联邦是目前构建微前端应用程序的最佳技术。 本文中,我将为前端应用程序提供一个利用模块联邦的插件架构。...该架构允许开发人员既有应用程序中添加、删除或更新功能,而无需对应用程序进行任何更改。得益于模块联邦实现的无缝集成,该插件架构才成为可能。 插件架构是什么?...render(); }); 如下例所示,每当在remote中增添新的路由,则host中无需改变单独的代码,只消在下次加载时便会自动出现了...register 的 routes 选项 这个选项在前面的部分中讨论过,是一个路由定义数组,通常可以从你使用路由器库中扩展(我的例子中,我重用了react-router-dom中的RouteObject

14310

使用网络协议分析仪Wireshark

双击wireshark安装程序图标,机内安装过程。根据提示进行选择确认,可以顺利安装系统。安装好需重启系统。 2.使用Wireshark分析协议 ⑴启动系统。...实际应用中可以使用跟踪路由命令确定数据包在网络上的停止位置。TTL是有效的跃点计数,必需路径的每个路由器转发数据包之前至少递减一,当TTL递减至0时,路由器将“ICMP超时”的消息发送回源地址。...路由则通过检查中间路由器送回的“ICMP已超时”的信息来确定路由。 ②截图中输入命令第一行显示测试包最大跳数30,防止路由回环;域名解析ip为119.75.216.61。...)时,由于TTL由1减为0,该路由便向源主机发送一超时报文,同时不再转发该包。...,由于TTL路由减1为0,所以将会向主机地址发送一ICMP超时报文,同时不再转发该包。

80520

一文带你梳理React面试题(2023年版本)

的语法糖,使用jsx等价于React.createElementjsx是js的语法扩展,允许html中写JS;JS是原生写法,需要通过script标签引入为什么文件中没有使用react,也要在文件顶部...使用React.lazy和React.Suspense延迟加载不需要立马使用的组件六、常用组件错误边界React部分组件的错误不应该导致整个应用崩溃,为了解决这个问题,React16引入了错误边界使用方法...SPA不能记住用户操作,只有一个页面对URL做映射,SEO不友好前端路由帮助我们仅有一个页面时记住用户进行了哪些操作前端路由解决了什么问题当用户刷新页面,浏览器会根据当前URL对资源进行重定向(发起请求...路由器Route 路由匹配Link 链接,html中是个锚点NavLink 当前活动链接Switch 路由跳转Redirect 路由重定向Home<NavLink...Router核心能力:跳转路由负责定义路径和组件的映射关系导航负责触发路由的改变 路由器根据Route定义的映射关系为新的路径匹配对应的逻辑BrowserRouter使用的HTML5的history

4.2K122

7000字前端性能优化总结 | 干货建议收藏

浏览器对网站第一次的域名DNS解析查找流程依次为: 浏览器缓存 ->系统缓存 ->路由器缓存 ->ISP DNS缓存 ->递归搜索 DNS预解析的实现: 用meta信息来告知浏览器, 当前页面要做DNS...,有些得不偿失,这时候就可以使用按需加载, 将每个路由页面单独打包为一个文件,当然不仅仅是路由可以按需加载。...css中图片懒加载 除了对于 元素的图片进行加载 CSS 中使用的图片一样可以懒加载,最常见的场景就是 background-url。...当一个事件频繁触发,而我们希望事件触发结束一段时间(此段时间内不再有触发)才实际触发响应函数时会使用防抖(debounce)。...例如用户一直点击按钮,但你不希望频繁发送请求,你就可以设置当点击 200ms 内用户不再点击时才发送请求。

95920

手把手教你实现全栈博客项目(2)-- 前端react-xxx、路由配置

项目地址:https://github.com/Nealyang/React-Express-Blog-Demo 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人。...最后倒入store,用于App中使用react-router 配置说明 react-router中的配置主要在/container/index.js文件中。该文件负责导出所有路由中的文件。...至于为什么要在这里放这些isFetch和notification。因为这是所有路由的最外面一层,是front和admin界面下公共的部分。Loading加载图标,全局提示信息都可以公用。...注意admin中的路由匹配,这里必须要使用{match},否则你点击link你会发现路由跳转成功了,但是对应页面没有渲染。...关于admin中为什么判断this.props.userInfo后续权限判断哪里会说到。以及会说这里遇到的一些问题(重点)。这里我们还是只关注路由部分。再次强调,必须使用match 来取url。

73330

万字长文:分享前端性能优化知识体系

浏览器对网站第一次的域名DNS解析查找流程依次为: 浏览器缓存 ->系统缓存 ->路由器缓存 ->ISP DNS缓存 ->递归搜索 DNS预解析的实现: 用meta信息来告知浏览器, 当前页面要做DNS...,有些得不偿失,这时候就可以使用按需加载, 将每个路由页面单独打包为一个文件,当然不仅仅是路由可以按需加载。...css中图片懒加载 除了对于 元素的图片进行加载 CSS 中使用的图片一样可以懒加载,最常见的场景就是 background-url。...当一个事件频繁触发,而我们希望事件触发结束一段时间(此段时间内不再有触发)才实际触发响应函数时会使用防抖(debounce)。...例如用户一直点击按钮,但你不希望频繁发送请求,你就可以设置当点击 200ms 内用户不再点击时才发送请求。

77440

暴肝!7000 字的前端性能优化总结 | 干货建议收藏

浏览器对网站第一次的域名DNS解析查找流程依次为: 浏览器缓存 ->系统缓存 ->路由器缓存 ->ISP DNS缓存 ->递归搜索 DNS预解析的实现: 用meta信息来告知浏览器, 当前页面要做DNS...,有些得不偿失,这时候就可以使用按需加载, 将每个路由页面单独打包为一个文件,当然不仅仅是路由可以按需加载。...css中图片懒加载 除了对于 元素的图片进行加载 CSS 中使用的图片一样可以懒加载,最常见的场景就是 background-url。...当一个事件频繁触发,而我们希望事件触发结束一段时间(此段时间内不再有触发)才实际触发响应函数时会使用防抖(debounce)。...例如用户一直点击按钮,但你不希望频繁发送请求,你就可以设置当点击 200ms 内用户不再点击时才发送请求。

54820

如何学习 React - 有效的方法

ES6 概念 承诺 回调 异步/等待 类和 OOP 概念 再次使用 API,不要只是学习,要应用!! React 此时,当您学习了 JavaScript 基础知识,是时候深入研究 React 了。...您可以创建新项目或重新制作您在使用 React 学习普通 JavaScript 时所做的项目。 React路由器 了解 React 路由器。...React router 是一个用于 React路由库,它将帮助您在 React 应用程序中浏览不同的页面。了解加载特定页面的内容、 URL 中传递参数、重定向等。...此外,了解 React 路由器不是 React 的一部分,它是为 React 制作的路由库。...这些库将在您的日常 React Dev 生活中为您提供帮助。但是,并不是必须学习所有内容,您可以完成 React 基础知识并可以制作项目尝试学习它们。 恭喜 你是一名 React 开发人员。

5.3K20

React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

react-native-vector-icons的矢量图标作为Tab的显示图标,tabBarIcon接收一个React 组件,大家可以根据需要进行定制: tintColor: 当前状态下Tab的颜色;...的时候传递了参数{ name: 'Devio' }; 【高级案例】react-navigation的高级应用 使用react-navigation时往往有些需求通过简单的配置是无法完成的,比如:...:createMaterialTopTabNavigator被包裹TabNavigator中的页面是无法借助navigation跳转到外层StackNavigator中的页面的,这种应用场景很多,尤其是你需要定制...类似上述的应用场景有很多,大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线App视频教程进行进一步学习react-navigation的更多高级应用。...大家在学习使用React Navigation3x过程中遇到任何问题都可以React Navigation3x的视频教程中寻找答案哈。

12.6K20
领券