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

React路由在Heroku上不工作,但在本地工作

React路由在Heroku上不工作的可能原因有多种,以下是可能的解决方案:

  1. 404错误:在Heroku上运行React应用时,如果访问一个不存在的URL,会返回404错误页面。这可能是由于路由配置不正确引起的。首先,确保你的路由配置是正确的,确保每个URL都有相应的组件和路由路径。
  2. 基础路径:在Heroku上部署React应用时,需要设置正确的基础路径。在应用的package.json文件中的homepage字段中指定应用的基础路径,例如"homepage": "https://example.com/my-app"。同时,在路由配置中也要使用<BrowserRouter>组件来指定基础路径,例如<BrowserRouter basename="/my-app">
  3. 服务器端配置:在Heroku上运行React应用时,可能需要进行一些服务器端配置。例如,你可能需要在服务器上配置重定向规则,以确保所有的URL都指向React应用的入口文件。具体的配置方法取决于你使用的服务器和框架。
  4. 编译问题:在部署到Heroku之前,确保你的React应用已经成功编译。可以运行npm run build命令来构建应用的生产版本,然后将构建结果部署到Heroku。

如果上述解决方案都无效,可以尝试以下步骤:

  1. 检查浏览器控制台:在浏览器的开发者工具中查看控制台输出,检查是否有任何错误消息或警告。这些消息可能会给出更多有关问题的线索。
  2. 检查网络请求:使用浏览器的网络面板查看网络请求,确保路由请求正确地发送到服务器并返回正确的响应。如果请求未发送或返回错误的状态码,可能需要检查服务器配置或网络连接。
  3. 更新依赖项:检查你的React和相关依赖项的版本是否是最新的。更新到最新版本可能会解决一些已知的问题。

最后,如果问题仍然存在,可以尝试在React社区的论坛或问答网站上寻求帮助,以获得更专业的建议和支持。

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

相关·内容

8个写完以后就可以让你成为顶尖开发者的有趣应用程序

Demo :https://trello-copy-ddiaorohmd.now.sh/ 你将clone一个Trello: 路由 拖放 创建新对象(板子、列表、卡片) 处理输入和验证 客户端路径:如何使用本地存储...你将学到: 本地应用程序是如何工作的。 从API获取数据。 本地布局如何工作。 如何使用移动模拟器。 使用此api(https://coinmarketcap.com/api/)。...嗯,这不是一个应用程序,但是在技术理解WebPack下我们如何工作,它仍然是非常有用的。它将不再是一个“黑箱”,而是给你带来一个强有力的工具。 要求: 编译ES7回到ES5。...(Vue-cli和创建React应用程序要用到) 使用Heroku,now.sh或GitHub为生产环境建立和未来部署做准备。...理解本地应用程序和Web应用程序的工作方式会让你很容易从人群中脱颖而出。 你将学到什么: Web套接字(即时消息) 本地应用程序是如何工作的。 布局是如何在本地工作的。 本地应用程序的路由

2.6K10
  • 使用 NextJS 和 TailwindCSS 重构我的博客

    第一版:使用 Hexo 和 Github pages 优点:重新部署只要花 5 分钟,内容管理本地 纯静态、免费; 缺点:依赖 Github,国内访问困难; 第二版:React + Antd + Mysql...第三版:NextJS + TailwindCSS + Postgresql 优点: 服务端渲染(SSR) + 静态生成, 访问速度极快,全新 UI 支持换肤; TailwindCSS 在国外如火如荼,但是国内却很少看到在生产应用...而文章内容写完之后是通常不变的,所以可以先将页面静态存储服务器,这样就可以大大减小数据库压力。 getStaticProps 构建时请求数据。...1、MySQL 里有只有 utf8mb4 才能显示 emoji 的坑, Pg 就没这个坑; 2、Pg 可以存储 array 和 json, 可以 array 和 json 建索引; 代码编辑器 从上一版是...),数据库还是选择 Heroku

    2.3K20

    如何将 github 的代码一键部署到服务器?

    Github 看到一些不错的仓库,想要贡献代码怎么办? Github 看到一些有用的网站,想部署到自己的服务器怎么办? 。。。 我想很多人都碰到过这个问题。...如果要贡献代码,之前我的做法通常是将代码克隆到本地,然后本地的编辑器中修改并提交 pr。...顾名思义,就是有一个按钮,点击一下就能完成部署工作。 如下是一个拥有一键部署按钮的项目: ? 点击之后进入如下页面,你可以对一些默认配置进行修改(也可以直接使用默认配置): ?...这里以 heroku 为例,其他厂商(比如腾讯)原理都差不多。 由于上面的原因,实际我们传递给第三方云厂商的方式只可能是 url。因此我们可以直接将配置通过 ur 的方式传输。...你可以通过右键新的「无痕模式」中打开来验证。你会发现右键新的无痕模式中打开是无法正常部署的。 这有什么用呢? 一键部署意味着部署的门槛更低,不仅是技巧的,而且是成本的。

    11.8K31

    react】开发一款城市选择组件

    想到做这个,是因为无意中github看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题目...技术栈 采用的是react官网提供的脚手架create-react-app,因此整体技术是react,采用webpack进行打包构建,jest测试。同时在此基础新增了一些东西。...package.json中,将script中的 react-scripts 换成 react-app-rewired // 3....页面公用本地存储,若不想公用,可以之后区分id即可。 热门城市 热门城市是自己预先定义的,如果希望预先定义,也可以参照某些API,这里算是偷懒。...来部署应用的,但是经过一番折腾之后,heroku的日志中看到服务是已经启动了的,但是外网访问不了,还需要技术支持^_^ ?

    3.9K30

    放弃“免费套餐”,Heroku的遗产又少了一个

    实际,这个革命性的产品,从技术讲已经停滞不前,其产品也名存实亡,一位 Heroku 前员工 HN 写道:“你必须追溯到 Heroku Changelog 才能找到任何不是语言版本升级或特性删除的内容...同时这也奠定了 Heroku PaaS 领域的地位,成为了云应用开发规范化的基石。...Heroku 使这一问题得到了极大的简化,它使开发者集中精力构建软件,而非在配置和运行基础设施。在当今世界,这显然是一种有利条件,但在那时并非如此。...Cedar 让 Heroku 成为可以运行一切的平台——用户可以通过 Buildpack 和 Procfile 带来自己的栈,它复杂的内部状态机和路由层使得运行在其的应用变得非常强大。...即使是最大的数据处理应用也可以部署 10GB 或 100GB 内存的容器,一直到最小的一次性云 grep 运行只需要几兆字节。如此快速和简单,以至于不在 Heroku 运行简直就是疯了。

    4.8K40

    ButterCMS架构:完成数百万次调用的关键任务API

    我们的业务要求我们的API能够100%处于正常工作状态,但在经历了多次几乎使业务陷入瘫痪的中断之后,我们开始关注于消除单点故障。...我们希望这样,但理论,服务器可以完全关闭几个小时,而客户的网站会像Fastly一样长时间保持在线。 Fastly的全球CDN提供了另一个好处。...对于应用服务器,则使用Heroku的监视和自动扩展工具,来确保流量性能不会从峰值降低(如果 Fastly停机了,需要将所有的请求都直接路由到服务器)。...通过谷歌云运行一个服务器和数据库实例作为快速失效备援,来防止极小可能出现的Heroku或者AWS(Heroku运行其)中断。...总的来说,中断、路由问题和其他断续故障统计学意义是不常见的,但是,仍然有可能在一定的环境背景下发生。 为了消除这种固有的不可靠环境,需要帮助客户开发在失效情况下的容错应用。

    1.7K60

    容器是未来吗?

    好吧,我有点糊涂了,让我梳理一下,有一个东西像虚拟化,称为容器,那么我能在Heroku用它吗? -是l, Heroku已经支持docker, 但是我告诉你: Heroku已经死了....你可以CoreOS运行你的容器. 那那又是什么东东? -它是一个非常酷的主机OS(Host OS),你能在其使用Docker,甚至你都不需要Docker, 直接使用rkt. Rocket?...-这就是你所有做的,你将你的应用写成一个Dockerfile, 将它们转换成本地image, 然后你能将它推送到任何Docker主机. 嗯,很像Heroku? -, 不是Heroku....它能让你指挥路由你的服务. 指挥编排(Orchestrate)服务?...-No, 他工作CoreOS. 这么说吧,Diego因为Paxos太难了,因此构建Raft,邪恶的聪明的家伙。然后他写了etcd作为一种实现,Aphyr说那不是狗屎。。 Aphyr是谁?

    2.7K40

    主流 PaaS 平台架构:谷歌GAE、AEB、Cloud Foundry、Heroku

    GAE有自己的云平台 SDK库,使应用程序能快速地部署和运行到云。 在这个架构下应用流量可被路由到多个版本以支持 A/B 测试。...亚马逊云边界的最外端有一个功能强大的DNS 服务器,它会接收用户的域名查询工作,并将后端配置负载均衡的正常的服务 IP 返回给用户,在这里它提供了安全可靠的路由功能。...Heroku路由模块被称为 Hermes,采用 Erlang 语言编写,其能够动态感知一个应用中包含多少个 dyno,基于一定的策略进行任务分发,另外我们还可以设置超时保护机制,Hermes 就拒绝掉外部请求...Heroku 打破了日志输出的传统观点,我们一般认为日志是非常重要、不可缺失的,日志以文件的形式存放在本地磁盘中,并且有开头、结尾,重视日志文件中每一行内容时间排序的关联性。...Heroku 就为这些后端服务的访问定义了一套 add-ons API,从而实现了代码与某个固定服务的解耦。 Heroku 最流行的后端服务是 PostgreSQL 数据库。

    6.4K20

    GraphQL 入门详解

    简介 定义 一种用于API调用的数据查询语言 核心思想 传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。...前端 刚刚我们都是用GraphiQL浏览器调用接口,接下来我们看一下在前端页面中怎么调用graphql服务。前端我们使用react。...项目根目录初始化react项目: $ npx create-react-app client 为了便于调试,package.json中增加scripts: "start": "node server.js...运行 由于本地调试,client和server分别运行在不同的端口,所以需要先进行跨域处理,使用 cors。...本文灵感来源:Youtube@Traversy Media,感谢 本文Demo Github地址:Github@MudOnTire 本文Demo线上展示:Heroku@graphql-spacex-launches

    2.1K20

    关于“Python”的核心知识点整理大全62

    有鉴于此,我们可以信心满满,深信项目部署到Heroku后,行为将与它在 本地系统的完全相同。当你自己的系统开发并维护各种项目时,这将是一个巨大的优点。...Heroku部署中,这个目录总是/app。本地部署中,这个目录通常是项目文件夹的名称(就我 们的项目而言,为learning_log)。...2处,我们导入了dj_database_url,用于Heroku配置服务器。...20.2.10 本地使用 gunicorn 服务器 如果你使用的是Linux或OS X,可在部署到Heroku前尝试本地使用gunicorn服务器。...处的输出表明,gunicorn端口5000侦听请求。另外, gunicorn还启动了一个工作进程(12878),用于帮助处理请求(见3)。

    15710

    JHipster技术简介

    WHAT - 技术栈 JHipster是什么 JHipster是一个开发平台,用于生成,开发,部署Spring Boot + Angular/React Web Application和Spring microservices...2 0 开发CURD代码 5 1 开发前端UI 10 1 合计: 18 2 实际项目中因为定制化工作的需要,开发效率的差距会比这个小,但正常情况下减少一半以上的工作量是可以达到的。...前端技术栈 Angular 5和React Bootstrap响应式网页设计 HTML5 国际化 CSS的Sass WebSocket 使用Yarn安装新的JavaScript库 使用Webpack构建...JPA Liquibase Elasticsearch MongoDB和Couchbase Cassandra Kafka 微服务技术栈 使用Netflix Zuul或Traefik作为HTTP路由...可在运行时进行配置 使用HikariCP连接池以获得最佳性能 构建标准WAR文件或可执行JAR文件 完整的Docker和Docker-Compse支持 支持所有主要云提供商:AWS,Cloud Foundry,Heroku

    12.7K90

    7 个原则和 10 种策略让你成为 10x 开发者

    Docker 本地默认会缓存,而且很快,但在 CI 中你没有永久的机器。所以你需要自己设置缓存。参考 Docker 文档。 e....未来缓存的工作原理是在你的整个团队和 CI 之间共享一个缓存。 这意味着如果你本地构建了一个提交,然后将该提交推送到 CI 。CI 构建将只是下载你做的缓存构建,并在几秒内完成。...或者,如果你团队中的其他人已经构建了一个提交,然后你本地运行构建,它同样会下载缓存,几秒内完成,而不是从头再构建一次。 5. 用预览环境替代暂存环境 预览环境是与拉取请求生命周期相关的临时环境。...这导致了 Heroku 的诞生,全世界的开发者都为此欢呼雀跃。但这种兴奋并不持久,因为运维人员并不高兴。事实证明, Heroku 这样的抽象大公司是无法扩展的。...基于主线的开发就是这样工作的。每个特性准备就绪时直接进入主分支。子任务还是整个项目无关紧要,因为它们都是完全独立工作和可部署的。 如果直接提交到主分支对你来说太激进,那么第二好的做法是短期分支。

    9410

    写在 2021: 值得关注学习的前端框架和工具库

    作者:林渡 https://juejin.cn/post/6935670539088461855 最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?...整体的感受非常舒服: 模块划分,我本人非常喜欢模块化的思想(个人认为React的是组件化而不是模块化),各个模块完全自己干自己的,不管是多级路由还是复杂数据流都显得结构清晰。...但在Angular中模板被单独放一个html文件,组件用Class的语法写,我就莫名觉得爽快。...而且actions市场有各种大神们已经写好的action让你可以快速搭建一个严谨的工作流。...Nx Cloud[76],Nx(详细介绍见下面)提供的云平台,主要功能是项目达到一定规模,导致构建耗时较长时,避免每个开发人员要重新自己本地构建一次项目,而是从云端下载已构建完成的文件,以此来提高效率

    4.2K10

    Heroku上部署Node.js

    你需要安装Heroku ToolBelt才能使Heroku在你的系统正常工作,同时你还需要在你的系统安装GIT,因为Heroku和git要在一起协同工作。...只需输入命令heroku login,然后按照要求输入用户名和密码就可以了: 第5步 第5步 Heroku创建一个应用。...如果您希望Heroku来为您决定应用的名称,请使用以下命令:heroku create。 第6步 现在我们剩下的最后一步就是将本地仓库的所有文件推送到服务器。...我们通过使用命令:git push heroku master来实现。该命令将把所有本地版本库的分支推送到远程服务器对应的分支。...您可以在上面的屏幕截图中看到,最终部署之后,将看到一个URL(红圈标注),您可以使用它来访问您的应用程序。 相关的参考资料: Node.js

    3.6K80

    Astro是2023年最好的web框架,原因如下

    基本,这意味着在后端执行前端代码以进行初始渲染。 这样做的问题是:我们需要一个NodeJS服务器,因为只有NodeJS后端才能执行客户端语言JavaScript。...SSGSPA成为一种事物之前就已经存在,但在上述问题出现后,它们变得越来越流行。 但是......Astro 最初是一个基于 JavaScript 语言的静态站点生成器(SSG),但默认情况下在客户端生成任何JavaScript。...它具有基于文件的路由,支持URL参数和查询 它具有图像优化和转换、Markdown支持(.md和.mdx)、前置内容支持 它具有CSS作用域支持、SASS支持 它具有脚本标签作用域和打包 它可以轻松集成自定义元素...它可以轻松部署主要的Web主机上,包括边缘服务器:Netlify、Vercel、Cloudflare、Firebase、Surge、Render、Heroku等!

    34810

    React系列:react项目的创建到可以编写业务的一些列初始化

    create-react-app 项目名 创建项目 npm install react-router-dom 安装路由 npm install sass -D 安装sass npm install antd...--save 安装antDesign npm install axios 安装url请求依赖 npm install react-redux @reduxjs/toolkit 安装redux 配置基础路由...> ); 配置别名路径 看我一篇文章:React系列:配置@别名路径并配置联想...配置仓库 gitee上自己创建仓库 ,自己电脑配置ssh key,(网上找一个配置过程 或者 找我之前的文章看一下) cd 到你的本地项目目录下 git add * git commit -m “.../request' export { request } 开始业务模块 上边的环境准备好就可以开始后续的业务开发工作。 总结 大功告成,撒花致谢,关注我迷路,带你起飞带你富。

    21510
    领券