React Routing 在本地有效,但在 Heroku 中无效

2024-03-07

我的问题与中概述的问题即使不完全相同,也非常相似this https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku问题。不幸的是,我无法使用它提供的策略来解决它。所以这是我自己的详细信息:

我在用创建反应应用程序, 反应路由器 4, Express, and Heroku并已按照说明进行操作here https://github.com/fullstackreact/food-lookup-demo#deploying关于使用 CRA 设置服务器。

在本地,我可以访问诸如myapp/about,但是在构建并推送到 Heroku 后,这些 404.

我可以通过 UI 导航到该路线(即通过单击将路线推送到的菜单项)history),但仅使用浏览器的地址栏无法导航到此路线。此外,当我使用 UI 导航时,我没有看到任何与路线相关的网络活动,例如/about要求。然而,当我更改地址栏并按 Enter 键时,这会产生对所述路由的网络请求。

以下是我的代码中的一些精选片段:

app.js

<Switch>
  <Route exact path="/about" component={About} />
  <Route path="/" 
    render={props => <coolListContainer {...props}/>} />
</Switch>

服务器.js

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
} 

//...what some of my api routes look like:

app.route('/api/verify')
  .post( async (req, res) => {
      try {
        await db.verifyCode(req.body)
        res.json('success')
      } catch (err) {
        res.json(err);
      }
    }
  });

我的目录结构由 full-stack-react 提供快速演示 https://github.com/fullstackreact/food-lookup-demo.

└── myapp
    ├── Procfile
    ├── README.md
    ├── client
    │   ├── build
    │   │   ├── asset-manifest.json
    │   │   ├── index.html
    │   │   └── static
    │   │       ├── css
    │   │       │   ├── main.e8c50ca0.css
    │   │       │   └── main.e8c50ca0.css.map
    │   │       └── js
    │   │           ├── main.24fe0ebe.js
    │   │           └── main.24fe0ebe.js.map
    │   ├── package.json
    │   ├── public
    │   │   └── index.html
    │   ├── src
    │   │   ├── About.js
    │   │   └── index.js
    │   └── styles
    │       └── about..css
    ├── package.json
    ├── server.js
    └── static.json

根据给出的答案这个帖子 https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku,我还扑通一声static.json文件放入根目录。

静态.json

{
  "root": "client/build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

上面的配置在任何路由上都会给我 404 错误。


好吧,我明白了。

我所需要的只是确保任何与我的内部 API 无关的请求,例如GET通过地址栏请求,直接路由到我的index.html通过 React Router 处理动态路由的文件。现在看来已经足够明显了。

这是我的最终路线app.js:

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/client/build/index.html'));
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Routing 在本地有效,但在 Heroku 中无效 的相关文章

随机推荐

  • 通过 Segue 传递数据 (swift 2)

    这是一个小费计算器项目 它必须有一个设置视图 我可以在其中选择默认小费率 我在传递数据时遇到一些问题 当我选择默认小费百分比时 它在视图控制器中不会更改 而且我想让应用程序在关闭应用程序并重新打开时记住默认费率 如果有人纠正我的代码并对其进
  • 具有一个参数的多个构造函数

    因此 在学校我们接到了一项作业 用 OOP 制造一辆汽车 到目前为止 这一切都非常简单和直接 但现在我需要创建四个构造函数 一个不带参数 两个带一个参数 一个带两个参数 据我所知 重载的工作方式是检查您提供的参数数量 然后检查它必须使用哪个
  • ChartJS:图表不显示所有数据

    由于某种原因 该图表没有显示数组中的最后两个数据 var data labels Brasil Argentina Chile Paraguai Peru Bol via M xico datasets data 9 19 7 77 6 8
  • AWS API Gateway 始终返回 502 bad gateway

    我在 AWS 中创建了一个简单的 lambda 函数 它从 DynamoDB 返回列表 我还创建了 API Gateway 来触发 lambda 函数 当我在 AWS 控制台中测试时 该函数运行良好 但是当我在 Postman 中测试此功能
  • 如何删除 lambda 事件处理程序 [重复]

    这个问题在这里已经有答案了 我最近发现我可以使用 lambda 来创建简单的事件处理程序 例如 我可以订阅这样的点击事件 button Click s e gt MessageBox Show Woho 但你如何取消订阅呢 C 规范明确指出
  • 如何在文本中定义人名(Java)

    我有一些输入文本 其中包含一个或多个人名 我没有这些名字的字典 哪个 Java 库可以帮助我根据输入文本定义名称 我浏览了 OpenNLP 但没有找到任何示例或指南 或者至少没有找到如何将其应用到我的代码中的描述 我看到了 javadoc
  • AttributeError:“TimedeltaProperties”对象没有属性“分钟”

    我有一个看起来像这样的数据框 df output date time 2020 02 28 00 30 45 2020 02 28 00 30 45 2020 03 09 00 21 06 2020 03 09 00 21 06 2020
  • 应用程序退出,退出代码为 -1073740771

    我有一个 WPF 应用程序 有时会以退出代码 1073740771 退出 该问题不会以任何模式出现 并且因系统而异 在某些系统中 该问题的发生率不到总案例的 10 而在其他系统中 我发现该问题的发生率几乎占总案例的 30 我无法形成任何可靠
  • UIImagePickerController 选择视频会阻止 MPMoviePlayerViewController 实例工作

    我有一个视图控制器 我在其中呈现UIImagePickerController在弹出窗口中 如果用户选择视频 则关闭弹出窗口并移至下一个 页面 视图控制器 并尝试使用以下方式播放任何电影MPMoviePlayerViewController
  • 如何将图片转换为html?

    有没有办法将图像转换为html相当于图像 通过有一个html表分为许多单元格 每个单元格都有特定的背景颜色 就像图像中的像素一样 很像 ASCII 艺术 我认为这是一种在电子邮件签名中包含公司徽标的方法 而不必担心电子邮件客户端阻止图像 是
  • 每个数据库提供程序类型允许的最大参数数是多少?

    可以传递到 Sql Server 查询 即通过 ADO Net 的参数限制为 2 100 个 但是 Net 开发人员使用的其他常见数据库的记录限制是什么 特别是我感兴趣的是 甲骨文10g 11g MySql PostgreSQL Sqlit
  • JavaFX 偶发渲染问题 - 按钮/控件消失

    我有一个 Java JavaFX 应用程序部署为 Windows 和 Mac 的本机安装 目前捆绑的运行时间为 8 121 您可以在此处找到安装程序和 Java 代码 乔治下载 http www george andante no down
  • 基于 SML 的文件查找

    有没有办法使用 SML Basis 库在特定位置打开文件 也就是说 使用操作系统调用来更改位置 而不是扫描文件并丢弃数据 这很棘手 不幸的是 不直接支持搜索 此外 文件位置仅对于二进制文件是透明的 即您使用BinIO结构 1 对于该结构体
  • 如何获取两个列表并将它们组合起来排除任何重复项?

    我想从两个单独的独特项目列表中创建一个列表 还有其他类似的问题 但似乎没有任何问题涉及有效地解决这个问题 因为列表有几百万个项目长 完全无关 我是唯一一个讨厌标签建议框掩盖 发布你的问题 按钮的人吗 Use a set gt gt gt f
  • Protractor / Selenium XHR 保持“待处理”状态

    我正在使用 Protractor 和 selenium 来测试我的 Angular 页面 在某些随机点 它只是停止执行 因为 XHR 请求仍处于 待处理 状态 在 Chrome 开发工具中 当我复制请求 URL 这是一个简单的 GET 请求
  • 如何从 Eclipse 在 jetty 8 上运行 Web 服务 Maven 项目?

    我有一个之前创建并部署在 Tomcat7 中的 REST Web 服务 按照建议 我想将其部署在 Jetty 上在上一个问题中 https stackoverflow com questions 11691036 is it possibl
  • 使用 HTML5 服务器事件和 Java Servlet 时如何防止 net::ERR_INCOMPLETE_CHUNKED_ENCODING?

    我刚刚开始玩服务器事件 遇到了一条我想了解的 chrome 错误消息 我很快在网上搜索 但没有找到解释 所以我想我可能做了一些非常错误的事情 在服务器端 我有一个简单的 servlet 它接受请求并创建一个虚拟事件创建器任务 private
  • Rails 4:如何访问 ActiveRecord_Relation-Object 的属性?

    我有一个国家模型和一个游记模型 一个国家有很多游记 一篇游记属于一个国家 在 Rails 控制台中 TravelNote published country 248
  • VBA 哈希字符串

    如何使用 Excel VBA 获取长字符串的短哈希 给予什么 输入字符串不超过80个字符 有效输入字符为 0 9 A Z 有效输出字符为 0 9 AZ az 大小写均可 输出哈希值不应超过 12 个字符 越短越好 根本不需要唯一 因为这会导
  • React Routing 在本地有效,但在 Heroku 中无效

    我的问题与中概述的问题即使不完全相同 也非常相似this https stackoverflow com questions 41772411 react routing works in local machine but not her