单页应用程序 (SPA)

有两种方法可以将单页应用程序与 React Router 一起发布

作为库 - 您可以将其作为库在您自己的 SPA 架构中使用，而不是使用 React Router 的框架功能。请参阅React Router 作为库指南。
作为框架 - 本指南将重点介绍此处

1. 禁用服务器渲染

服务器渲染默认启用。将 react-router.config.ts 中的 ssr 标志设置为 false 以禁用它。

import { type Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

将其设置为 false 后，将不再生成服务器构建。

2. 使用客户端加载器和客户端操作

禁用服务器渲染后，您仍然可以使用 clientLoader 和 clientAction 来管理路由数据和变异。

import { Route } from "./+types/some-route";

export async function clientLoader({
  params,
}: Route.ClientLoaderArgs) {
  let data = await fetch(`/some/api/stuff/${params.id}`);
  return data;
}

export async function clientAction({
  request,
}: Route.ClientActionArgs) {
  let formData = await request.formData();
  return await processPayment(formData);
}

3. 预渲染

可以为构建时已知的具有静态数据的路径配置预渲染，以加快初始页面加载速度。请参阅预渲染以进行设置。

4. 将所有 URL 重定向到 index.html

运行 react-router build 后，将 build/client 目录部署到您喜欢的任何静态主机。

对于部署任何 SPA 来说，您需要将主机配置为将所有 URL 重定向到客户端构建的 index.html。某些主机默认执行此操作，但其他主机则没有。例如，主机可能支持 _redirects 文件来执行此操作

/*    /index.html   200

如果在应用程序的有效路由中遇到 404 错误，则可能需要配置主机。

重要提示

典型的单页应用程序发送一个几乎空白的 index.html 模板，其中包含的除了一个空的 <div id="root"></div> 之外几乎没有其他内容。

相反，react-router build（在禁用服务器渲染的情况下）会预渲染您的根路由和索引路由。这意味着您可以

发送多个空 div
使用 React 组件生成用户看到的初始页面
稍后重新启用服务器渲染，而无需更改 UI 的任何内容

这也是您的项目仍然需要依赖 @react-router/node 的原因。