Question

我有一个reactJS应用程序，我最终将其部署在heroku上。当我在本地开发机器上测试应用程序（并且我的package.json文件中具有正确的“开始”字符串时，我得到了要显示的初始页面。当我单击3条以打开菜单并单击一个在菜单项中，我可以在控制台（我正在使用Chrome）中看到页面加载并显示出来。启动该应用程序时，我在日志中看到一个条目

Navigated to http://localhost:8080/

当我单击3个菜单栏并选择“输入新属性”菜单选项时，我会在日志中看到

Navigated to http://localhost:8080/enterproperty

，然后浏览器显示页面。这按预期工作。

然后我将package.json中的“开始”脚本更改为包含以下内容：

"dev-server": "webpack-dev-server --open",
"start": "node server.js",
"build": "webpack -p",
"heroku-postbuild": "npm run build"

我执行了以下git hub命令：

git add .
git commit -m "commitXX"
git push heroku master
git heroku

这将启动我的浏览器并打开https://aqueous-shore-94052.herokuapp.com/，然后打开我的页面。当我在console.log中查看时，会看到以下内容：

Navigated to https://aqueous-shore-94052.herokuapp.com/

我单击了菜单栏，然后选择输入新属性，然后在console.log中看到了这一点：

https://aqueous-shore-94052.herokuapp.com/enterproperty 404 (Not Found)

这是我的server.js文件的内容：

const express = require('express')
const app = express()
const path = require('path')
const port = process.env.PORT || 3001

app.use('/', express.static(path.join(__dirname, 'public')))

app.listen(port, () => console.log("Listening on Port", port))

为什么找不到我的屏幕？

Answer 1

您是否可以将我们引导到github存储库？我想这可能与前端的路由有关，尽管我不能肯定地说。

Answer 2

看起来您需要抓住所有中间件。尝试将其添加到express.static行下面：

/*
Send request to the app, let it deal with 404s, etc
 */
app.use((req, res) => {
  res.sendFile(__dirname + '/public/index.html')
})

这是“如果以上路由均不匹配，请使用此文件进行响应”-这样，您的react应用和react-router就能做到。

部署到heroku的reactjs应用程序可以找到除起始页面之外的任何页面

2 个答案: