TL;DR如果我理解正确的话，答案可能是“不可能”。但还有另一种解决方案...
我认为您正在尝试执行以下操作，将其描述为一系列步骤：
页面开始加载，<Loader />组件显示“页面加载”动画
页面加载完成，<Loader />组件被删除（或隐藏）并且<Page />组件与“真实”页面内容一起插入（或显示）。
问题是这样的：记住你将 React 组件注入到页面中，如下所示：
ReactDOM.render(<Wrapper />, document.getElementById('app'));
在加载 DOM 之前，您实际上无法注入 React 组件。所以到了那个时候，要么<Loader />出现大约 2 毫秒然后消失，或者根本不出现（因为 DOM 在注入页面时已经加载）。
如果你想展示一个 throbber 或其他简单的动画（如动画 GIF），我会尝试一种混合方法：
像这样设置你的 HTML：
<body>
<div id="app"><img src="throbber.gif" /></div>
</body>
在脚本标记中，包含一个 JQuery“文档就绪”事件处理程序来加载 React 组件：
class Page extends Component {}
class Wrapper extends Component {
render() {
return (
<Page />
);
}
}
$(document).ready(function () {
ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
请注意，我遗漏了<Loader />- throbber 图像正在执行加载程序的工作。
这里的想法是，当页面加载时，颤动 GIF 将颤动直到 DOM 加载，此时 JQuery 的文档就绪事件将触发，并且该事件的内容将被触发。div#app将被替换。
我没试过这个，但它should工作，前提是 React 实际上replaces的内容div#app，而不是仅仅向其添加内容。如果情况并非如此，那么只需将文档就绪处理程序更改为如下所示即可：
$(document).ready(function () {
$('div#app img').remove();
ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
