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

在github页面上部署时,`window.location.href`在react应用程序上不起作用

问题描述:在 GitHub 页面上部署时,window.location.href 在 React 应用程序上不起作用。

回答:在 GitHub 页面上部署时,window.location.href 在 React 应用程序上可能不起作用的原因是 GitHub Pages 默认是基于静态文件的托管服务,React 应用程序是一个单页面应用(SPA),在部署到 GitHub Pages 后,路由切换会导致页面刷新,但 GitHub Pages 只能处理静态路由,无法处理前端路由导致的页面刷新。

解决该问题的常见方法是使用 Hash 路由或者将应用打包为静态文件后再进行部署。

  1. 使用 Hash 路由:在 React Router 中,可以通过在路由配置中添加 hashHistory 来使用 Hash 路由模式。在使用 Hash 路由后,URL 中的路由信息会以 # 符号后的部分来表示,这样 GitHub Pages 可以正确解析并展示页面内容。
  2. 打包为静态文件后部署:可以使用常见的前端构建工具(如 webpack 或者 Parcel)将 React 应用程序打包为静态文件,然后将生成的静态文件部署到 GitHub Pages。这样可以避免前端路由导致的页面刷新问题,并且 GitHub Pages 能够正确地托管和展示应用程序。

以上是针对在 GitHub 页面上部署时 window.location.href 在 React 应用程序上不起作用的解决方法。希望对您有所帮助。

推荐的腾讯云相关产品:腾讯云静态网站托管(Static Website Hosting)

  • 链接:https://cloud.tencent.com/product/scf
  • 介绍:腾讯云静态网站托管(Static Website Hosting)是腾讯云提供的一项静态网站托管服务,适用于个人网站、企业官网、应用文档、在线教育等各种场景。您可以快速、安全、稳定地将静态网站部署到腾讯云,提供全球加速和智能缓存,让您的网站在全球范围内都能快速访问。

请注意,以上推荐的腾讯云产品仅供参考,其他云计算品牌商也提供类似的产品和服务。

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

相关·内容

令人惊叹的前端路由原理解析和实现方式

单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。...路由的概念来源于服务端,服务端中路由描述的是 URL 与处理函数之间的映射关系。... Web 前端单页应用 SPA(Single Page Application)中,路由描述的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面)。... () {   routerView = document.querySelector('#routeView')   onPopState()   // 拦截  标签点击事件默认行为, 点击使用...所有的示例的代码放在 Github 仓库: https://github.com/whinc/web-router-principle 参考 详解单页面路由的几种实现原理 单页面应用路由实现原理:以 React-Router

1.6K30

基于Github issues + umi 搭建一个免费的带评论功能的博客(二)

如果选择 history路由,那么部署上线后,非根路径下刷新页面会报404错误。...单页应用一般是需要在服务端设置将所有的页面都重定向到 index.html 的,比如我们刷新http:xxx.com/list页面,服务器会去根路径的list目录下去查找资源文件,这个文件服务器显然是不存在的...使用GitHub部署你的应用 借助于Github也可以方便的部署你的应用,并且这种方式我觉得值得推荐,他有下面几个优点: Deploys every push in branches and pull...首先需要在zeito.co注册一个账号,然后关联你的Github账号,然后进入dashboard页面,这里就可以创建自己的应用,并且选择From Github中已存在的工程进行创建。...部署你的博客 前端代码写完了就要考虑部署的问题了,这里我选择的是部署Github Pages ,选择 Github pages 的理由很简单: 代码自动集成: Github pages 集成 Github

56410
  • 【油猴脚本】 Iconfont 直接复制 React component 代码

    低端设备 SVG 有更好的清晰度。 支持多色图标。 SVG 可以支持动画 并给出了最终方案,放弃使用字体,使用 SVG 代替 iconfont。...所以我写了一个油猴脚本,可以 iconfont.cn 直接复制 React component 代码,如此一来,我们就省去了配置 webpack 的烦恼。...装完插件后会在原先的下载按钮边上多出一个复制按钮,点击复制按钮复制 react 代码,就可以 react 项目中粘贴使用了。...直接使用 svgr playground 的接口 当我看到 svgr playground 的时候,我就想知道它的实现原理,打开控制台一看,我们连云函数都不用写了,它就是一个部署 vercel 的一个接口...接下来我们只需要通过 Dom api 获得当前点击元素的 SVG 代码 每个图标的操作覆盖层加入一新图标,用于复制 react component 原先是块级布局,一列显示 3 行 为了减少页面空间

    2K20

    2020 非常火的 11 个微前端框架

    每个团队可以端到端地拥有自己的功能,可以自己的代码库中工作,可以独立发布版本,可以不断进行小的增量升级,还可以通过 API 与其他团队集成,以便他们可以一起组建和管理页面应用程序。...我们怎样构建微前端》 https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc 如果你的团队使用组件来开发软件,并且正在寻找一种可以大型应用程序上解锁微前端和模块化工作的解决方案...它们可以选择包含一些逻辑,从而允许服务端的 node.js 应用去组建用于呈现视图的模型。渲染之后,它们就是纯 html 片段,可以插入到任何 html 页面中。...该项目旨在解决由较小的子应用程序组成较大的应用程序时所面临的一些主要问题,例如发布静态资源、集成单个子应用程序、确保子应用程序开发和部署过程中彼此独立且运行时相互隔离、处理公共依赖性和处理性能问题等。...而且,当片段所需的 api 出现故障,PuzzleJs 可保证其他页面片段仍正常工作。这里是一个真实的 例子。

    1.7K20

    你必须知道的11个微前端框架

    每个团队可以端到端地拥有自己的功能,可以自己的代码库中工作,可以独立发布版本,可以不断进行小的增量升级,还可以通过 API 与其他团队集成,以便他们可以一起组建和管理页面应用程序。...我们怎样构建微前端 》 https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc 如果你的团队使用组件来开发软件,并且正在寻找一种可以大型应用程序上解锁微前端和模块化工作的解决方案...它们可以选择包含一些逻辑,从而允许服务端的 node.js 应用去组建用于呈现视图的模型。渲染之后,它们就是纯 html 片段,可以插入到任何 html 页面中。...该项目旨在解决由较小的子应用程序组成较大的应用程序时所面临的一些主要问题,例如发布静态资源、集成单个子应用程序、确保子应用程序开发和部署过程中彼此独立且运行时相互隔离、处理公共依赖性和处理性能问题等。...而且,当片段所需的 api 出现故障,PuzzleJs 可保证其他页面片段仍正常工作。这里是一个真实的 例子。

    2K10

    2020 非常火的 11 个微前端框架

    每个团队可以端到端地拥有自己的功能,可以自己的代码库中工作,可以独立发布版本,可以不断进行小的增量升级,还可以通过 API 与其他团队集成,以便他们可以一起组建和管理页面应用程序。...我们怎样构建微前端》 https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc 如果你的团队使用组件来开发软件,并且正在寻找一种可以大型应用程序上解锁微前端和模块化工作的解决方案...它们可以选择包含一些逻辑,从而允许服务端的 node.js 应用去组建用于呈现视图的模型。渲染之后,它们就是纯 html 片段,可以插入到任何 html 页面中。...该项目旨在解决由较小的子应用程序组成较大的应用程序时所面临的一些主要问题,例如发布静态资源、集成单个子应用程序、确保子应用程序开发和部署过程中彼此独立且运行时相互隔离、处理公共依赖性和处理性能问题等。...而且,当片段所需的 api 出现故障,PuzzleJs 可保证其他页面片段仍正常工作。这里是一个真实的 例子。

    2.2K22

    适用于既有大型MPA项目的“微前端”方案

    当用户访问页面,由 nigix等负责根据路由分发到不同的业务应用,由各个业务应用完成资源的组装后返回给浏览器。...以有赞微商城后台为例,针对B端业务,我们就已经划分了数十个的应用,可独立进行开发、打包和部署。如下图所示: ?...那么,面对一个大型的 MPA架构前,我们的页面还可以再快一点吗?对于有赞的前端体系来讲,进行业务域的拆分应用后,业务级别的独立开发、部署已经变成了日常。...我们的解决办法是,业务应用在 registerPage customProps中的 unmountComponent回传业务方卸载方法,例如 React就是 unmountComponentAtNode...3.5.4 灰度控制规则 由于上线后影响面较大(每个页面),也要支持各个业务应用的分开接入,所以灰度和开关控制我们也考虑了很多,以支持一旦发现线上有意料外的 "feature",可以精确的控制某个店铺或者页面是否开启

    1.7K20

    动手练一练,使用 React 和 Next.js 做一个简单的博客网站(下)

    ,使用 React 和 Next.js 做一个简单的博客网站()》和 《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)》这两篇文章里,我们一起完成了一个基于 MakeDown...《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)》这篇文章里,我们使用了getStaticProps() 这个方法项目编译(build)处理生成 MD 动态路由相关的逻辑...如果要使用服务端渲染,我们可以使用 getServerSideProps() 函数,页面请求由服务端执行此函数逻辑,完成数据的渲染。...: 二、客户端渲染(Client-side Rendering),实现暗黑浏览模式 Next.js 会在编译的时机(build time)或页面请求服务端完成 React 组件的渲染逻辑,但是有些功能完全可以交给客户端端浏览器处理...const [href, setHref] = React.useState(window.location.href); 为了修复这个问题,我们可以将初始值赋值null。

    1.6K31

    React 中的一些 Router 必备知识点

    /native/guides/quick-start) 来实现 React 单页应用的路由控制,它通过管理 URL,实现组件的切换,进而呈现页面的切换效果。...路由传参小 Tips 实际开发中,往往页面切换需要传递一些参数,有些参数适合放在 Redux 中作为全局数据,或者通过上下文传递,比如业务的一些共享数据,但有些参数则适合放在 URL 中传递,比如页面类型或详情页中单据的唯一标识...id=111', }}/> 此时,假设当前页面 URL 中的 id 由 111 修改为 222 ,该路由对应的组件(在上述例子中就是 React-Route 配置 path="/book" 对应的页面...https://github.com/ReactTraining/react-router/issues/4410) 针对上一节中场景 1 的 Case C,查询参数隐身式带法(从 state 里带过去的...答案:貌似没有做特殊处理,Dva React-Router 做了上层封装,会默认输出 React-Router (https://github.com/ReactTraining/react-router

    2.9K40

    React 中的一些 Router 必备知识点

    /native/guides/quick-start) 来实现 React 单页应用的路由控制,它通过管理 URL,实现组件的切换,进而呈现页面的切换效果。...路由传参小 Tips 实际开发中,往往页面切换需要传递一些参数,有些参数适合放在 Redux 中作为全局数据,或者通过上下文传递,比如业务的一些共享数据,但有些参数则适合放在 URL 中传递,比如页面类型或详情页中单据的唯一标识...处理 URL ,除了问号带参数的方式,React-Router 能帮我们做什么呢?在这其中,Route 组件的 path 属性便可用于指定路由的匹配规则。...id=111', }}/> 此时,假设当前页面 URL 中的 id 由 111 修改为 222 ,该路由对应的组件(在上述例子中就是 React-Route 配置 path="/book" 对应的页面...答案:貌似没有做特殊处理,Dva React-Router 做了上层封装,会默认输出 React-Router (https://github.com/ReactTraining/react-router

    2.7K20

    前端常见react面试题合集

    更重要的是,你不能保证组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试一个未挂载的组件上调用 setState,这将不起作用。... React 中,何为 stateState 和 props 类似,但它是私有的,并且完全由组件自身控制。State 本质是一个持有数据,并决定组件如何渲染的对象。...当组件只是接收 props 渲染到页面,就是无状态组件,就属于函数组件,也被称为哑组件或展示组件。...工厂组件会导致 React 变大且变慢。act()也支持异步函数,并且你可以调用它使用 await。使用 进行性能评估。...较大的应用中追踪性能回归可能会很方便(3)React16.13.0支持渲染期间调用setState,但仅适用于同一组件可检测冲突的样式规则并记录警告废弃 unstable_createPortal,

    2.4K30

    Taro 小程序开发大型实战(八):尝鲜 LeanCloud Serverless 云服务

    欢迎继续阅读《Taro 小程序开发大型实战》系列,前情回顾: 熟悉的 React,熟悉的 Hooks[1]:我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型 多页面跳转和 Taro...其中 MyUser 类似之前我们微信小程序数据库表的 user 表。...Taro 存在缺陷,只能说它是一个很有潜力的框架,成长还需要实践,并且跨端小程序是它诞生的重点,将精力放在主要的路径是值得提倡的,Taro 近期发布了 Taro Next,支持使用 Vue/React...微信小程序上线 首先点击小程序开发者工具的右上角的上传按钮: 接着去微信小程序网站后台:点我前往。 进行登录之后,进来的第一个页面的第二步可以看见版本发布的信息,安装微信官方的流程进行即可。...本文所涉及的源代码都放在了 Github[23] ,如果您觉得我们写得还不错,希望您能给❤️这篇文章点个在看+Github仓库加星❤️哦 参考资料 [1] 熟悉的 React,熟悉的 Hooks: https

    85910

    使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

    本教程的最后,将向大家展示如何在新创建的应用程序上添加 Material Dashboard React我们开始之前,请确保你的电脑安装了 npm 和 Nodejs 的最新版本。...撰写本文,我的电脑的最新版本是 npm 的 6.4.1 和 Nodejs 的 8.12.0 (lts)。...每当我们应用程序中更改文件,它会自动刷新浏览器页面 本文所用的版本是 3.1.8 看一下package.json文件,将看到这三个包被添加到这个文件中,如下所示: "devDependencies"...当我们刷新页面,有一个错误 Cannot GET/dashboard。 如果我们跳转到另一个页面,会得到如, Cannot GET /user错误等 。...所以根本,我们的路由不起作用,需要在 src/index.js 或 webpack.config.js 中进行一些更改。 这里选择使用第一个方案,因为它非常简单易懂。

    9.4K60

    一文讲解前端路由、后端路由、单页面应用、多页面应用

    前端路由 定义:主要用于单页面应用,大部分页面结构不变,只通过JS改变部分内容的使用(例如:react-router,vue-router) 优点:用户体验好,不需要每次都从服务器全部获取,切换页面快速展现给用户客户端渲染可以减轻服务器压力...SEO角度讲单页面应用天生对SEO不友好,因为整个页面都是通过JS渲染的,搜索引擎爬虫只能抓取到一个根节点,但是后端路由是经过后端自带的模板框架渲染的(ejs,jsp)已经服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由...单页面应用 优势: 实际并不存在页面切换问题,因为整个网站只有一个HTML,通过预先加载好的JS控制页面显示会更流畅,而且可以附加各种动画和过度效果,用户体验更好。...,如果测试有误对漏掉一些BUG很可能影响后续功能 体积较大,首次加载时间较长,首页白屏问题 多页面应用 优势: 逻辑清楚页面直接几乎没有相互影响 单个页面体积小,加载速度快 劣势: 代码冗余 页面切换体验不好...url传值和加密传值,url传值基本为 window.location.href=href/param方法修改路径或者?

    2.5K20

    使用Gitee提供镜像站支持

    而且与github的联动非常好,可以直接通过Gitee导入Github的仓库,然后使用Gitee的仓库来git clone项目,之后再重新设置远程仓库链接,将修改push到Github。...导入 Github 项目到 Gitee: 之后我们可以右上角找到从 Github/GitLab 导入仓库的选项 ?...将 Hexo 部署到 Gitee 首先需要在 Gitee 新建一个仓库来存放博客的静态页面资源,仓库名必须和你的用户名一样,比如我的用户名是 Akilar,那么就建一个叫做 Akilar 的仓库,...此处建议所有的 Deploy 链接都使用 HTTPS 链接,便于之后使用 Github Action 实现全自动部署的 Token 配置。 ?...运行 hexo clean && hexo g && hexo d 即可将静态页面部署到仓库内。

    1.3K20

    Excalidraw, 一款超赞的开源白板工具

    接下来我会和大家介绍一下这款开源项目的功能特点, 如何二次开发, 以及如何使用我改造好的成品快速部署到自己的服务器....二次开发 接下来就到了技术小伙伴最关注的环节了,如何使用它, 二次开发自己的白板应用....安装 首先我们需要在自己的项目里安装它: yarn add react react-dom @excalidraw/excalidraw 接下来写一个简单的demo: function App() {..."none", color: "#fff" }} onClick={() => window.location.href..., 效果如下: 当然还有很多可定制的属性, 大家也可以自行探索, 我把我自己定制好的一套白板发布到 gitee 上了, 包括中文支持, 欢迎页面, 页面控件等, 感兴趣的也可以直接基于我的项目二次开发.

    46310

    ReactJS和React-Native的主要区别在哪里

    本文中,我将介绍作为ReactJS网页开发人员在学习使用React-Native并用其构建一些原生app,此时我遇到它们间的主要差别。...这些React-Native组件映射了应用程序上呈现的实际的真正的原生iOS或Android UI组件。...我做的第一件事是搜索一个替代react-router,这个大多数React网络应用 程序用来页面间转换的著名的库。...发布 如果您为iOS和Android开发应用程序,则需要了解Xcode和Android Studio的工作原理,以确保App Store或Google Play上首次部署应用程序之前正确设置所有内容。...对于iOS,它的工作原理就像您将部署常规的本地应用程序一样,尽管对于Android,您需要遵循React的建议才能将其上传到Google Play。

    17K30

    前端路由三种模式原理

    前端路由三种模式原理 Router-way github详细介绍路由原理 前端页面三种路由实现方式。 传统路由实现。 window.location.href = 'baidu.com' 跳转。...历史记录中替换当前记录。 可以改变网址(存在跨域限制)而不刷新页面,这个强大的特性后来用到了单页面应用如:vue-router,react-router-dom中。...Hash模式 hash模式背后的原理是onhashchange事件,可以window对象监听这个事件: window.onhashchange = function(event){ /...更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退页面字体颜色也会发生变化。...因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户浏览器直接访问 oursite.com/user/id 就会返回 404,这就不好看了。

    1K30

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

    笔者个人感觉学习react-router,有助于我们学习单页面应用(spa)路由跳转原理,让我们理解从history.push,到组件页面切换的全套流程,使我们面试的时候不再为路由相关的问题发怵,废话不说...一 正确理解react-router 1 理解单页面应用 什么是单页面应用?...个人理解,单页面应用是使用一个html下,一次性加载js, css等资源,所有页面都在一个容器页面下,页面切换实质是组件的切换。 ?...react-router-dom,react-router的核心基础,添加了用于跳转的Link组件,和histoy模式下的BrowserRouter和hash模式下的HashRouter组件等。...二 单页面实现核心原理 单页面应用路由实现原理是,切换url,监听url变化,从而渲染不同的页面组件。 主要的方式有history模式和hash模式。

    3.9K40
    领券