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

Question

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

转到 example.com 正确显示主页，但是在执行类似示例的操作后。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，以便如果请求不是静态文件，它会失败并由您的 React 应用在 [=11] 上作为前端路由处理=].

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

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

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

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

Correct approach to handle react-routes on a server?

node.js

reactjs

react-router

server