Question

我已将我的应用程序上传到服务器并遇到问题。

前往example.com正确显示主页，但在执行example.com/dashboard之类的操作后，我收到错误Cannot GET /dashboard。我认为这是因为服务器实际上正在尝试获取该路径，但它仍然需要通过index.html，因为这是使用react-router的单页应用程序。我相信我需要将所有请求重定向到index.html以使其工作，但我不确定如何实现这一点。我使用express来服务我的文件，这是我的server.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));

app.listen(8080, function() {
  console.log('Listening on port: ' + 8080);
});

Answer 1

您需要设置Express，以便如果某个静态文件的请求不是，它就会被index.html上的React应用程序作为前端路由处理。

添加到上面的例子，像这样，

var express = require('express');
var app = express();

app.use('/static', express.static(__dirname + '/dist'));

app.get('*', function (req, res, next) {
  if (req.path.startsWith('/static')) return next()
  res.sendFile('dist/index.html')
})

app.listen(8080, function() {
  console.log('Listening on port: ' + 8080);
});

请注意，我为您的静态资源添加了/static路径。这意味着您的应用对静态资产的每次请求都必须看起来像/static/foo.jpg（或其他）。可能值得重命名dist文件夹static，以保持名称同步。

这是一个有用的模式，因为它可以让您轻松区分静态资产请求和应该落到前端应用程序的请求。

正确处理服务器上的反应路由的方法？

1 个答案: