【发布时间】：2019-05-21 22:25:57
【问题描述】：
我的问题很常见：我有一个单页 React 应用程序，一切正常，但如果直接导航或刷新 URL 子页面将无法加载。
我花了几个小时（也许几天）搜索，许多论坛帖子/文章/教程写的关于这个问题的前提是使用像 Heroku 或 Digital Ocean 这样的部署平台，它们要么为你做一些工作，要么可能有一些混淆了我无法解析的相关工作，以使其对我的特定应用程序有意义。
不涉及特殊部署平台的讨论总是假设我使用 create-react-app 创建了我的应用程序，但我没有。我试图在 create-react-app 中重新创建使单页应用程序路由正常工作的进程（npm build 被编程为使 node 从 packages/react-scripts/bin 运行 react-scripts.js，但 react-scripts 中的代码。 Node.js 比我的技能水平高一点，而且似乎还涉及 create-react-app 的其他方面——再说一次，我没有使用过——所以我放弃了。）
在开始这个过程之前，我对后端编程知之甚少。现在我参加了关于 node.js 和 MongoDB 的课程（我现在意识到 Mongo 与我正在尝试做的事情完全无关）。我目前正在参加 Express 课程，但我仍然有点出海，我几乎可以肯定有一个非常简单的解决方案。
我希望有人可以：a）解释我缺少什么； b) 将我引导到可以解释但不使用特殊部署平台或 create-react 应用程序的来源；或 c) 只需告诉我我缺少的一两行代码（我很确定它最终只会是一两行）。
我使用 Gulp 作为我的任务运行器构建了我的网站，并且一切都在本地运行良好（例如，刷新并直接访问像 localhost:3000/about 这样的子页面 URL 有效）。
负责这个的 Gulpfile 代码是：
const browserSync = require('browser-sync');
const historyApiFallback = require('connect-history-api-fallback');
function bs() {
browserSync.init({
server: {
baseDir: './'
},
middleware: [historyApiFallback()]
})
};
您可能很明显——这是我的设置——当简单地将站点文件夹上传到 cPanel 文件主机并期望它像在本地一样工作时，尝试通过 URL 直接访问 React 路由将停止工作，但那时我并不知道更好。
我现在正在尝试使用 Express 来设置我的 server.js 文件，以使单页应用程序路由工作。我已经告诉节点在我的 package.json 中运行 server.js。这是我的 server.js 文件的样子：
var express = require('express')
var path = require('path')
var history = require('connect-history-api-fallback');
var app = express()
app.use(history());
app.use(express.static(__dirname))
app.get('*', function (req, res) {
// I've fiddled with this part a million
//different ways but can't seem to get it to work
//because including lines like 'alert('WORKING') or
//res.alert('WORKING') in here never result in an alert
//pop-up when entering a URL
res.sendFile(path.join(__dirname, '/index.html'))
})
var PORT = process.envPORT || 8080
app.listen(PORT, function() {
console.log('Production Express server running at localhost: ' + PORT)
})
最终我希望像 www.mysite.com/about/ 这样的 URL 从我的 React 路由器加载页面和“/about”路由，但此时我会满足于任何和所有直接 URL 请求只转发到www.mysite.com/index，我也尝试过但失败了。
也许最好像在和孩子说话一样说出你的答案。
【问题讨论】：
标签： reactjs express single-page-application