刷新后无法获取正确的静态文件，索引页除外

Question

当我在索引路由 (/) 和登录页面 (/login) 上刷新页面时，它工作正常。

但是，当我在其他路线上刷新时，我的网站出现错误，例如 /user/123456。

因为无论请求是什么，浏览器总是得到 HTML 文件。
因此，main.css和main.js中的内容都是HTML，浏览器报错

我已经阅读了 create-react-app 的自述文件。
无论我使用serve package ($serve -s build -p 80)还是express，都会产生奇怪的bug。

以下是我的服务器代码：

//server.js
const express = require('express');
const path = require('path');
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 80;
app.listen(PORT, () => {
  console.log(`Production Express server running at localhost:${PORT}`);
});

编辑：我已经找出问题所在。
我创建了一个新项目，并将其与我的进行了比较。静态文件的路径在新项目中是absolute，而在我的项目中是relative.
结果，我删除了 package.json 中的 "homepage": "."。

//package.json
{ ....
  dependencies:{....},
  ....,
- "homepage": "."
}

现在一切正常。我怎么粗心了...

Answer 1

如果您的路由 /user/** 是在 app.get('/*', ... 之后定义的，它可能不匹配，因为 /* 获得所有请求而 returns 您 index.html。尝试不使用 * 或之前声明其他路由。

Answer 2

首先，我认为您误解了服务器部分。在您的情况下，您使用 serve 作为您的服务器。这是 [serve] 提供的静态服务器。如果您想使用自己的 server.js，您应该运行 node server.js 或 node server.

我也和你做了同样的事情，没有这个问题。以下是我所做的：

create-react-app my-app
npm run build
sudo serve -s build -p 80（sudo 适用于 1024 以下的端口）

我得到了结果：

/user/321

我猜你可能忘记构建脚本了。您可以尝试以下方法：

删除 build/ 文件夹
运行 npm run build 再一次

建议：如果你想专注于前端，你可以使用[serve]。您将很容易专注于您需要的东西。

Answer 3

我已经弄清楚问题出在哪里了。我创建了一个新项目，并将其与我的进行了比较。静态文件的路径在新项目中是absolute，而在我的项目中是relative。结果，我在 package.json.

中删除了 "homepage": "."

//package.json
{ ....
 dependencies:{....},
 ....,
- "homepage": "."
}

现在一切正常。我怎么粗心了...

刷新后无法获取正确的静态文件，索引页除外

Cannot get correct static files after refreshing except index page

node.js

express

reactjs

react-router

serve