Node.js 如何从express server为react应用程序和api提供服务？

因此，我的节点代码如下（简化）：

假设我的react路由器有一个

/fun/：param

路由和一个到

/fun/foo

页面的链接

如果我点击链接，我会进入

mypage.com/fun/foo

，但是如果我刷新，我会得到

无法得到/fun/foo

现在我明白了，实际情况是我向我的express服务器发送了一个请求，它试图找到

/fun/foo

路线，失败并返回

无法获取
，但我如何让它进入SPA的
/fun/：param
-ruote

我发现了这一点，并尝试在底部添加以下内容：

app.get('/*', (req, res) => {
  res.sendFile(path.join(`${__dirname}./../dist/index.html`));
});

如果我将传入请求记录到服务器，则在刷新
/fun/foo
时会得到以下信息：

a connection is made for /fun/foo
a connection is made for /dist/main.js
a connection is made for /fun/main.js

客户端不显示任何内容，控制台记录两个：

Uncaught SyntaxError: Unexpected token <     main.js:1 

该项目是用网页包构建的

index.html使用以下内容引用main.js：

<script src="../dist/main.js"></script>

在浏览器中转到“/dist/main.js”时会发生什么？它提供JS文件吗？看起来它提供的是HTML（意外标记是的，它看起来像dist/main.js文件是一个HTML文件，但我不知道这是怎么发生的？？？当我在服务器上查看它时，它不是一个HTML文件。我已经用项目文件夹结构的一些详细信息更新了我的问题。当你转到“/dist/main.js”时会发生什么在你的浏览器中？它提供JS文件吗？看起来它提供HTML（意外标记是的，它看起来像dist/main.JS文件是HTML文件，但我不知道这是怎么发生的？？？当我在服务器上查看它时，它不是HTML文件。我已经用项目文件夹结构的更多信息更新了我的问题。
server
   index.js
src
   App.js
   index.js
public -- only used for devServer(?)
   index.html
   favicon.ico
dist  -- what's used in production(?)
   index.html
   main
   main.js
   main.js.map

<script src="../dist/main.js"></script>

<script src="./main.js"></script>

Invariant Violation: Minified React error #321; visit
https://reactjs.org/docs/error-decoder.html?invariant=321 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings.