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

为什么react中的外部javascript在第一个页面更改/重定向到另一个路由后无法加载

在React中,当我们在第一个页面更改或重定向到另一个路由后,外部JavaScript文件可能无法加载的原因有以下几个可能性:

  1. 缓存问题:浏览器可能会缓存JavaScript文件,导致在第一个页面更改后,浏览器仍然使用缓存的旧文件。解决这个问题的方法是在文件的URL后面添加一个唯一的查询参数,以确保每次加载的都是最新的文件。例如,可以使用时间戳作为查询参数,如<script src="external.js?timestamp=123456"></script>
  2. 路由切换导致的组件卸载:当我们从一个路由切换到另一个路由时,React会卸载当前页面的组件,并加载新页面的组件。如果外部JavaScript文件是在当前页面的组件中引入的,那么在切换路由后,该组件会被卸载,导致外部JavaScript文件也无法继续加载。解决这个问题的方法是将外部JavaScript文件的引入放在根组件或者其他不会被卸载的组件中。
  3. 异步加载问题:如果外部JavaScript文件是通过异步加载的方式引入的,那么在切换路由后,可能会导致异步加载的过程被中断或者延迟。这可能会导致外部JavaScript文件无法加载完成。解决这个问题的方法是在异步加载的过程中,确保加载过程不会被中断或者延迟。可以使用React的Suspense组件来处理异步加载的问题。

总结起来,当在React中更改或重定向到另一个路由后,外部JavaScript文件无法加载的原因可能是缓存问题、组件卸载问题或者异步加载问题。解决这个问题的方法是添加唯一的查询参数来避免缓存问题,将外部JavaScript文件的引入放在不会被卸载的组件中,以及确保异步加载过程不会被中断或者延迟。

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

相关·内容

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

React是一个用于构建用户界面的JavaScript库。我们还可以借助React Router将其扩展为构建多页应用程序。这是一个第三方库,可在我们React应用程序启用路由。...重定向另一个页面 React Router还有另一个名为Redirect组件,正如您猜到,它可以帮助我们将用户重定向另一个页面。...您可能会争论为什么我不使用props.history.push('/')重定向用户?好吧,Redirect组件会替换页面,因此用户无法返回上一页,但是使用push方法,它可以。...重定向404页面 要将用户重定向404页面,您可以创建一个组件来显示它,但是为了使事情简单起见,我将仅显示带有render消息。...现在,让我们继续前进,并在下一部分中学习如何保护我们路由。 保护路由 有很多方法可以保护通往React路由。但是,在这里,我仅检查用户是否已通过身份验证并将其重定向适当页面

12K20

React 设计模式 0x5:服务端渲染 SSR

相对于客户端渲染(CSR,Client-Side Rendering),SSR 可以提高页面的首屏加载速度和搜索引擎优化(SEO),因为它可以服务器端直接生成 HTML,并将静态资源(如 CSS、JavaScript...强大社区支持 Next.js 有一个非常庞大社区,因为这个框架仍在不断发展,日益受欢迎 快速刷新 Nex.js 应用程序上进行代码更改时,更改会在几秒钟内在浏览器上反映出来 快速显示 Next.js...零配置 优秀开发者体验 使用 NextJS,我们花更多时间编写功能,而不是构建工具和 Webpack 上挣扎 自动路由 NextJS 将项目结构化为页面,并添加路由 数据获取 根据应用程序用例以不同方式呈现内容...包括使用服务器端呈现或静态站点生成进行预渲染以及使用增量静态再生在运行时更新或创建内容 中间件 此功能使您可以在请求完成之前运行代码,以便在请求和重定向用户时更改响应到另一个路由 数据安全性 Next.js...Next.js 节点路由方面的能力,因此如果你项目需要动态路由,你将不得不使用 Node.js 服务器 没有状态管理器 Next.js 框架没有内置状态管理器 为了充分利用状态管理器,你将需要另一个工具来完成它

3.9K10

离开页面前,如何防止表单数据丢失?

向用户添加一个确认对话框,询问他们具有未保存表单更改情况下是否确认重定向是一种良好用户体验实践。通过显示此提示,用户将意识到他们有未保存更改,并允许继续重定向之前保存或丢弃它们工作。... Next {">"} ); }); 当在表单字段输入数据并在保存更改之前尝试重新加载页面或导航到外部...为了使我们示例更具代表性,我们添加一个名为 Home 路由,它将重定向表单之外。 Home 组件很简单,只显示一个主页问候语。...请注意, Stepper 没有单独路径,所有其他路由都是它路由。它作为布局组件,每个页面上呈现。每个页面的内容显示特殊 Outlet 组件位置。...我们探讨了如何使用纯JavaScript处理这种情况,使用 beforeunload 事件以及React中使用React Router v5 Prompt 组件和React Router v6

5.8K20

你需要react面试高频考察点总结

属性 to: string:重定向 URL 字符串属性 to: object:重定向 location 对象属性 push: bool:若为真,重定向操作将会把新地址加入到访问历史记录里面,并且无法回退到前面的页面...Portals 提供了一种很好将子节点渲染父组件以外 DOM 节点方式。 第一个参数(child)是任何可渲染 React 子元素,例如一个元素,字符串或碎片。...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化服务器数据,也包括 UI状态,如激活路由,被选中标签,是否显示加载动效或者分页器等等。管理不断变化 state 非常困难。...所以,官方设计这个方法就是用来加载外部数据用,或处理其他副作用代码。...,页面无法加载出来。

3.6K30

Web 应用开发进化论

所有这些权限都不允许客户端上进行,否则每个人都可以未经授权情况下操作数据库。 由于我们仍然有服务器端路由能力,因此成功创建博客文章,Web 服务器能够将用户重定向页面。...例如,重定向可以指向新发布博客文章。如果没有重定向,HTTP POST/PUT/DELETE 请求通常会导致页面刷新/重新加载。...这会影响 SPA 用户体验,因为将 JavaScript 文件从 Web 服务器传输到浏览器初始加载时间会增加。加载完所有文件,用户可以从一个页面导航另一个页面而不会中断。...代码拆分不需要像之前场景那样路由级别发生。例如,也可以将较大 React 组件提取到其独立 JavaScript,以便它只会在实际使用它页面加载。...当用户从一个页面导航另一个页面时,只有一小部分服务器端渲染 React 被发送到浏览器。

4.2K10

【19】进大厂必须掌握面试题-50个React面试

一旦完成计算,将仅使用实际已更改内容来更新实际DOM。 8.为什么浏览器无法阅读JSX? 浏览器只能读取JavaScript对象,而不能读取普通JavaScript对象JSX。...道具是ReactProperties简写。它们是只读组件,必须保持纯净即不变。整个应用程序,它们始终从父组件传递子组件。子组件永远无法将道具发送回父组件。...因此,元素无法直接更新其状态,并且其提交由JavaScript函数处理。此功能可以完全访问用户输入表单数据。...所述 标签在使用时匹配以顺序次序定义路由类型化URL。找到第一个匹配项,它将呈现指定路线。从而绕过其余 路线。 48.为什么我们React需要一个Router?...路由器用于定义多个路由,并且当用户键入特定URL时,如果此URL与路由器内部定义任何“路由路径匹配,则用户将被重定向该特定路由

11.2K30

为什么每个人都在谈论同构JavaScript 以及为什么它很重要

在这篇文章,我们将更深入地探讨同构概念,并阐明为什么它对 Web 开发很重要——不管用来描述它流行语是什么。应用于 Web 开发同构意味着服务器端和客户端渲染页面。...例如,您可以 Gmail 为多封电子邮件并行加星标,而无需等待为电子邮件加星标的第一个过程成功完成。这改善了用户体验,因为 SPA 功能更像桌面应用程序。...这就是为什么你可能使用很多SPA——谷歌文档就是一个很好例子——或者甚至可能已经开发了一个。SPA 另一个功能是 HTML 客户端(即浏览器)上呈现和操作。...用户必须启用 JavaScript页面框架加载,用户必须等待JSON数据通过AJAX/XHR 返回。用非同构策略修补这些问题充其量是很麻烦。...与其他库相比,使用 React .js 主要优点是使用虚拟 DOM 进行渲染,这意味着只有更改增量才会在页面上呈现,而保持不变元素保持不变。

13010

滴滴前端常考react面试题(附答案)

简单地说, React中元素(虛拟DOM)描述了你屏幕上看到DOM元素。换个说法就是, React中元素是页面DOM元素对象表示方式。...key可以帮助 React跟踪循环创建列表虚拟DOM元素,了解哪些元素已更改、添加或删除。每个绑定key虚拟DOM元素,兄弟元素之间都是独一无二。... React和解过程,比较新虛拟DOM树与上一个虛拟DOM树之间差异,并映射到页面。...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化服务器数据,也包括 UI状态,如激活路由,被选中标签,是否显示加载动效或者分页器等等。管理不断变化 state 非常困难。...,返回那个函数也只会最终组件卸载时调用一次;[source]参数有值时,则只会监听到数组值发生变化才优先调用返回那个函数,再调用外部函数。

2.3K10

2023金九银十必看前端面试题!2w字精品!

Vue路由是如何实现? 答案:Vue路由是通过Vue Router实现。Vue Router是Vue.js官方提供路由管理器,它允许开发者Vue应用实现单页面应用(SPA)。...它可以异步组件加载完成之前显示一个占位符,并在加载完成渲染异步组件内容。这样可以更好地处理异步组件加载过程,提供更好用户体验。 5....答案:React Router是React中用于处理路由库。它提供了一种页面应用实现导航和路由功能方式。...重排会导致浏览器重新计算渲染树和重新绘制页面的一部分或全部。 区别在于重绘只涉及外观更改,而重排涉及布局更改。重排比重绘更消耗性能,因为它需要重新计算布局和绘制整个页面。 3....答案:重定向是指当浏览器请求一个URL时,服务器返回一个不同URL,从而将浏览器请求重定向URL上。 重定向浏览器作用是实现页面的跳转、URL修改或资源重定向

40242

2020最新前端面试题_2020年前端面试题

缩短了开发周期 21、项目性能优化 减少 HTTP 请求数 减少 DNS 查询 使用 CDN 避免重定向 图片懒加载 减少 DOM 元素数量 减少 DOM 操作 使用外部 JavaScript 和 CSS...可以,比如 v-on=“onclick,onbure” 16、$nextTick使用 data()修改页面无法获取data修改数据, 使用$nextTick时,当data数据修改...24、vue组件data为什么必须是一个函数? 因为JavaScript特性所导致,component, data必须以函数形式存在,不可以是对象。...1、实例创建之后添加新属性实例上(给响应式对象新增属性) 2、直接更改数组下标来修改数组值。...,让处于bfc内部与外部元素相互隔离,使内外元素定位不会相互影响 6、请说出至少三种减少页面加载时间方法 尽量减少页面重复http请求 css样式放置文件头部、js脚本放置文件末尾

6.6K10

react-router学习笔记

Redireact 通过 from 和 to 进行路由重定向。...这确实是个问题,因为我们仅仅希望 Home 被渲染,激活并链接到它。 如果需要在 Home 路由被渲染才激活指向 / 链接,请使用 Home 高级用法 动态路由 代码分拆,按需加载。...React Router 里路径匹配以及组件加载都是异步完成,不仅允许你延迟加载组件,并且可以延迟加载路由配置。首次加载你只需要有一个路径定义,路由会自动解析剩下路径。...组件外部使用导航 组件内部导航使用 this.context.router,外部使用 history 实现组件外部导航。...现在动画思路比较靠谱也大致是这种:通过添加/移除 class 方式,利用 css3 做动效。 滚动条复位 当页面回退时,将滚动条恢复页面最顶部,可以让单页路由看起来更加正常。

2.7K10

你要 React 面试知识点,都在这了

函数式编程,你无法更改数据,也不能更改。 如果要改变或更改数据,则必须复制数据副本来更改。...当涉及SPA应用程序时,首次加载index.html,并在index.html本身中加载更新数据或另一个html。当用户浏览站点时,我们使用新内容更新相同index.html。...外部样式表 在此方法,你可以将外部样式表导入组件使用类。 但是你应该使用className而不是class来为React元素应用样式, 这里有一个例子。...显示列表或表格时始终使用 Keys,这会让 React 更新速度更快 代码分离是将代码插入单独文件,只加载模块或部分所需文件技术。...如果通过点击浏览器重新加载按钮重新加载页面index.html,整个React应用程序将重新加载,我们将丢失应用程序状态。 如何保留应用状态?

18.4K20

必须要会 50 个React 面试题(下)

高阶组件是重用组件逻辑高级方法,是一种源于 React 组件模式。 HOC 是自定义组件,它之内包含另一个组件。它们可以接受子组件提供任何动态,但不会修改或复制其输入组件任何行为。...它负责维护标准化结构和行为,并用于开发单页 Web 应用。 React 路由有一个简单API。 47. 为什么React Router v4使用 switch 关键字 ?...使用时, 标记会按顺序将已定义 URL 与已定义路由进行匹配。找到第一个匹配项,它将渲染指定路径。从而绕过其它路线。 48. 为什么需要 React 路由?...Router 用于定义多个路由,当用户定义特定 URL 时,如果此 URL 与 Router 内定义任何 “路由路径匹配,则用户将重定向该特定路由。...主题 常规路由 React 路由 参与页面 每个视图对应一个新文件 只涉及单个HTML页面 URL 更改 HTTP 请求被发送到服务器并且接收相应 HTML 页面更改历史记录属性 体验 用户实际每个视图不同页面切换

3.5K21

「源码解析 」这一次彻底弄懂react-router路由原理

写在前面:为什么要学习react-router底层源码? 为什么要弄明白整个路由流程?...笔者个人感觉学习react-router,有助于我们学习单页面应用(spa)路由跳转原理,让我们理解从history.push,组件页面切换全套流程,使我们面试时候不再为路由相关问题发怵,废话不说...个人理解,单页面应用是使用一个html下,一次性加载js, css等资源,所有页面都在一个容器页面下,页面切换实质是组件切换。 ?...使得我们可以页面组件props获取location ,match等信息。 4 Redirect-没有符合路由,那么重定向 重定向组件, 如果来路由匹配上,会重定向对应路由。...同样会执行history方法重定向。 五 总结 + 流程分析 总结 history提供了核心api,如监听路由更改路由方法,已经保存路由状态state。

3.8K40

IMVC(同构 MVC)前端实践

1.2、isomorphic javascript isomorphic javascript(同构 js),是指一份 js 代码,既然可以跑浏览器端,也可以跑服务端。 ?...但是,用户只对首次加载有耐心,如果操作过程,频繁刷新页面,也会带给用户缓慢感觉。 ?...图3 SERVER-SIDE RENDERING 同构渲染则可以得到两种好处,首次加载时用服务端渲染,交互过程则采取浏览器端渲染。...这些代价所带来显著好处,要在 app 复杂一定程度时,才能真正体会。其它模式里,app 复杂一定程度,就难以维护了;而 Redux 可维护性还依然坚挺,这就是其价值所在。...问题根源:浏览器只 dom-ready 之前会等待 css 资源加载再渲染页面 问题描述:当单页跳转到另一个 url,css 资源还没加载完,页面显示成混乱布局 处理办法:将 css 视为预加载

1.3K60

金九银十求职季,前端面试大全送给你

兼容模式页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 2、行内元素有哪些?块级元素有哪些?...闭包特性 闭包是指有权访问另一个函数作用域中变量函数,创建闭包最常见方式就是一个函数内创建另一个函数,通过另一个函数访问这个函数局部变量,利用闭包可以突破作用链域,将函数内部变量和方法传递到外部...- 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护) 36、一个页面从输入 URL 页面加载显示完成,这个过程中都发生了什么?...可以该钩子中进一步地更改状态,不会触发附加重渲染过程。 - updated(更新由于数据更改导致虚拟DOM重新渲染和打补丁之后调用。...特点:hash虽然URL,但不被包括HTTP请求;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面

1.4K20

长期维护更新,前端面试题

多说一句,通过 link 标签请求加载外部样式表不会阻止并行下载。 3.减少外部HTTP请求 很多情况下,网站大部分加载时间来自于外部 Http 请求。...最近许多框架都使用简洁 HTML,CSS 和 JavaScript 代码。 一个页面从输入 URL 页面加载显示完成,这个过程中都发生了什么?...iframe会阻塞主页面的Onload事件; 搜索引擎检索程序无法解读这种页面,不利于SEO; iframe和主页面共享连接池,而浏览器对相同域连接有限制,所以会影响页面的并行加载。... JavaScript ,闭包在每个函数被创建时形成。 这是基本原理,但为什么我们关心这些?实际上,由于闭包与它词法环境绑在一起,因此闭包让我们能够从一个函数内部访问其外部函数作用域。... JavaScript ,闭包是用来实现数据私有的原生机制。当你使用闭包来实现数据私有时,被封装变量只能在闭包容器函数作用域中使用。你无法绕过对象被授权方法在外部访问这些数据。

2.4K41

react-router 使用与优化

react-router 可以创建单页应用。可以将组件映射到路由上,将对应组件渲染想要渲染位置(根据路径变化渲染出组件)。...window.location.replace("/") 表示重定向某个页面重定向相当于代替之前路由,之前那个路由不能后退回来。...Redirect 组件通常放在 Route 组件最后面,当页面都匹配不到时就重定向 / 页面。...静态服务器环境无法直接更改应用程序状态。在这种情况下,可以 context 特性中标记要渲染结果。如果出现了 context.url,就说明应用程序需要重定向。...这样可以让首次渲染页面时代码量变少,加快首屏速度。 ES 标准,有一个 import 异步加载模块语法,可以做到这一点。只是使用时需要下载有关包,因为不兼容。

3.2K10

整理了近期阿里携程面试题,分享给大家(后期会慢慢完善)

主要还得记得httpStatus-Code第一个数字定义响应类别,两个数字没有分类作用。...如果有一个比较复杂逻辑 需要更改state 应该放在reducer还是effect? 在哪里调用ajax,同步异步区别 ajax是否有副作用? vue和react相比优点和缺点。...生活实例: 我们知道目前一种说法是当 1 秒内连续播放 24 张以上图片时,人眼视觉中就会形成一个连贯动画,所以电影播放(以前是,现在不知道)基本是以每秒 24 张速度播放为什么不...说说React Native,Weex框架实现原理? React为什么自己定义一套事件体系呢,与浏览器原生事件体系有什么关系? 用过 React 技术栈哪些数据流管理库?...请描述一次完整 Redux 数据流 一个页面从输入 URL 页面加载显示完成,这个过程中都发生了什么?

1.6K21

【Vuejs】778- 超全 Vuejs 知识点(基础进阶)

没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向首页路由 兼容性,hash 可以支持低版本浏览器和 IE。...,所以系统能精确知晓哪个组件确实需要被重渲染 React ,一切都是 JavaScript。...不仅仅是 HTML 可以用 JSX 来表达,现在潮流也越来越多地将 CSS 也纳入 JavaScript 来处理 Vue 路由库和状态管理库都是由官方维护支持且与核心库同步更新。...一旦页面加载完成,SPA 不会因为用户操作而进行页面的重新加载或跳转;取而代之是利用路由机制实现 HTML 内容变换,UI 与用户交互,避免页面的重新加载。...: 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载; 前进后退路由管理:由于单页应用在一个页面显示所有的内容,

3.3K51
领券