node.js - 在服务器上处理 react 路由的正确方法？

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，以保持名称同步。

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