我正在使用最新的 React Starter Kit (Isomorphic) 构建应用程序，但遇到了问题。大部分应用程序都有静态数据，所以我首先只使用服务器端渲染制作了一些页面。
但是，当我创建一个向按钮添加 onClick 回调的页面时，该回调从未被调用过。
一段时间后，我发现我可以通过将以下内容添加到 Html 父组件来使其工作：
<script async src="/assets/main.js"></script>
现在页面可以正常工作了。但我认为这不是正确的解决方案，因为当我使用“-release”构建应用程序时，会发出带有哈希标签的 main.js（例如 main.63635afefa6a.js），并且在部署时不会找到。
我在这里错过了什么？
【问题讨论】：
标签： client-side react-starter-kit
// 此答案描述了 RSK 目前的工作方式，您的问题不清楚您是否修改了 RSK 的 Html 组件或服务器端路由（这也可能破坏了您的应用程序）
什么是 main.js？
main.js 是 WebPack 捆绑所有 JavaScript 的地方，这就是为什么强制添加引用它的脚本标签使其适用于非发布版本的原因。
但您应该使用 --release 构建，因为...
如果您使用 --release 构建您的应用程序，则会将文件内容的哈希添加到文件名中。这意味着当内容改变时，文件名也会改变。
由于旧版本的任何缓存（例如，在 ISP 处）都是用于具有不同名称的文件，因此可以保证请求具有更新名称的更新文件的客户端不会获得旧版本。
那么如何使用哈希指定正确的 main.js 名称？
Html 组件应该在<body> 中有一个 JSX 片段，例如：
{script && (
<script
id="source"
src={script}
data-initial-state={JSON.stringify(state)}
/>
)}
这在标准 RSK 中有效，因为 script 变量包含 main.js 文件名（使用 --release 构建时包含哈希）。这个变量值来源于 assets.js，它是由 WebPack 构建的。然后通过 server.js 的注入将其提供给Html 组件以在上面的片段中使用：
app.get('*', async (req, res, next) => {
const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };
// ...
const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
【讨论】：