单页应用程序使用Express来响应路由URL。但不要使用create-react-app或Heroku之类的部署服务

Question

我的问题很常见：​​我只有一个页面React应用程序，一切正常，但是如果直接导航或刷新，URL子页面将无法加载。

我花了几个小时（也许是几天）进行搜索，并且许多关于此问题的论坛帖子/文章/教程都以使用Heroku或Digital Ocean等部署平台为前提，这些平台要么为您完成一些工作，要么混淆了我无法解析的相关工作以使其对我的特定应用程序有意义。

不涉及特殊部署平台的讨论始终假定我使用create-react-app创建了我的应用程序，但没有。我试图在create-react-app中重新创建使单页应用程序路由正常工作的过程（{npm build被编程为使node从react-scripts.js运行packages/react-scripts/bin，但是react-scripts.js中的代码比我的技能水平高出一点，并且似乎还涉及到create-react-app的其他方面-再次，我没有使用过-所以我放弃了

在开始此过程之前，我对后端编程知之甚少。现在，我已经学习了关于node.js和MongoDB的课程（我现在意识到Mongo与我尝试做的事情完全没有关系）。我目前正在Express上一门课程，但是我几乎可以肯定我有一个非常简单的解决方案。

我希望有人可以：a）解释我所缺少的； b）将我定向到可以解释但不使用特殊部署平台或create-react应用程序的来源；或c）告诉我我缺少的一两行代码（我很确定它最终只会变成一两行）。

我使用Gulp作为任务运行器来构建站点，并且一切在本地都运行良好（例如，刷新并直接访问子页面URL，例如localhost：3000 / about正常）。

对此负责的Gulpfile代码为：

const browserSync = require('browser-sync');
const historyApiFallback = require('connect-history-api-fallback');

function bs() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        middleware: [historyApiFallback()]
    })
};

对您来说很明显-这是我的设置-尝试通过URL直接访问React路由将仅在将站点文件夹上传到cPanel文件主机并期望其像在本地一样工作时将停止工作，但那时候我不知道了。

我现在正在尝试使用Express来设置我的server.js文件，以使单页应用程序路由工作正常。我已经告诉node在我的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)
})

最终，我希望从我的React路由器中加载www.mysite.com/about/之类的URL并加载页面和“ / about”路由，但在这一点上，我将满足所有直接转发给URL的请求。 www.mysite.com/index，我也尝试过但失败了。

也许最好像在跟孩子说话一样用语表达你的答案。

Answer 1

您正在寻找错误的位置。请记住，React是用户和浏览器之间的接口（除了您的内容分发网络（cdn），但我们暂时对此并不感兴趣）。您的服务器与浏览器连接（反应）。不是用户。您的快递服务器已存在，可以将数据馈送到SPA。路由由React控制。

正如您所发现的，直接路由不起作用，因为从技术上讲您的网站只有一个index.html文件，React背负着该文件。这意味着两件事：

1. 反应必须能够解释不同的路线
2. 指向您的域的每个可能的网址都必须直接访问index.html。

使用react-router的SPA路由

对于第一个问题，您需要显式的路由逻辑。这就是npm软件包react-router的用途。

将您的域名托管服务商设置修改为始终指向index.html，而不考虑用户在其中键入的任何网址

第二步，您必须设置域主机以正确路由。如果您访问的是index.html以外的其他内容，则会获得404。您可以利用它来发挥自己的优势，并设置主机将404直接重定向到index.html。这有点怪癖，但这是完成事情的方式（哈希历史记录除外，我们稍后再介绍）。

使用react-router跳过主机配置，只需要hashHistory

如果要避开主机配置修改，可以使用react-router的{​​{1}}代替hashHistory。它会在您的域和任何其他路由之间创建browserHistory，这使您可以绕开/#/ index.html路由。这样做的缺点是您获得“丑陋”的网址。

404

my-website.com/#/a_route

祝你好运