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

Question

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

Navigated to http://localhost:8080/

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

Navigated to http://localhost:8080/enterproperty

然后浏览器显示该页面。这符合我的预期。

然后我更改了package.json中的“start”脚本以包含这个：

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

我执行了以下github命令：

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

看起来你需要捕获所有中间件。尝试在express.static行下面添加：

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

这说“如果以上路线都不匹配，请回复此文件” - 这样你的反应应用程序和react-router可以做到这一点。

Answer 2

有没有你可以指导我们的github回购？我猜它与前端的路由有关，虽然我不能肯定地说。