默认情况下,Remix 会为你处理客户端应用程序的水合。如果你想自定义此行为,可以运行 npx remix reveal
来生成一个 app/entry.client.tsx
(或 .jsx
) 文件,该文件将优先使用。此文件是浏览器的入口点,负责水合你的服务器入口模块中服务器生成的标记,但是你也可以在此处初始化任何其他客户端代码。
通常,此模块使用 ReactDOM.hydrateRoot
来水合你的服务器入口模块中已在服务器上生成的标记。
这是一个基本示例
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
这是在浏览器中运行的第一段代码。你可以初始化客户端库,添加仅客户端提供程序等。