function App() {
return (
<>
<div
style={{
width: "100vw",
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "black",
}}
>
<Logo3 />
</div>
</>
);
}
应用程序与上述一样简单。背景应该是黑色的，但有时有一个初始的白屏，在加载应用程序之前出现了一秒钟。如何预防这个白屏？
因此，最简单的方法是为您的HTML文件内的页面主体设置背景颜色。这样，有初始的背景颜色，当（重新）加载网站时，您将不会体验到Flash。
<style>
body {
background-color: black;
}
</style>
另一个更复杂的解决方案是使用服务器端渲染。
这个想法是让服务器提供DOM的初始版本。
加载和评估所有JavaScript代码后，该DOM将被React扩散和更改。
看一下
ReactDOMServer.renderToString(reactElement)
和
ReactDOM.hydrate()
如果您正在使用节点backend。 我认为below是一种更干净的方式，只需转到您的index.html文件或您的React应用程序所使用的任何内容，然后在初始
<html .. />
<html lang="en" style="background-color: #111">