预设

React Router 配置支持一个 presets 选项，以便与其它工具和托管提供商集成。

预设只能做两件事

代表你配置 React Router 的配置选项
验证已解析的配置

每个预设返回的配置会按照预设定义的顺序进行合并。任何直接在你的 React Router 配置中指定的配置将在最后合并。这意味着你的配置将始终优先于任何预设。

定义预设配置

作为一个基本示例，让我们创建一个配置服务器捆绑包函数的预设。

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

export function myCoolPreset(): Preset {
  return {
    name: "my-cool-preset",
    reactRouterConfig: () => ({
      serverBundles: ({ branch }) => {
        const isAuthenticatedRoute = branch.some((route) =>
          route.id.split("/").includes("_authenticated"),
        );

        return isAuthenticatedRoute
          ? "authenticated"
          : "unauthenticated";
      },
    }),
  };
}

验证配置

请记住，其他预设和用户配置仍然可以覆盖你的预设返回的值。

在我们的示例预设中，serverBundles 函数可能会被一个不同的、有冲突的实现覆盖。如果我们想验证最终解析的配置包含我们预设中的 serverBundles 函数，我们可以使用 reactRouterConfigResolved 钩子。

import type {
  Preset,
  ServerBundlesFunction,
} from "@react-router/dev/config";

const serverBundles: ServerBundlesFunction = ({
  branch,
}) => {
  const isAuthenticatedRoute = branch.some((route) =>
    route.id.split("/").includes("_authenticated"),
  );

  return isAuthenticatedRoute
    ? "authenticated"
    : "unauthenticated";
};

export function myCoolPreset(): Preset {
  return {
    name: "my-cool-preset",
    reactRouterConfig: () => ({ serverBundles }),
    reactRouterConfigResolved: ({ reactRouterConfig }) => {
      if (
        reactRouterConfig.serverBundles !== serverBundles
      ) {
        throw new Error("`serverBundles` was overridden!");
      }
    },
  };
}

只有在合并或覆盖你的预设配置会导致错误时，才应使用 reactRouterConfigResolved 钩子。

使用预设

预设旨在发布到 npm 并在你的 React Router 配置中使用。

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

export default {
  // ...
  presets: [myCoolPreset()],
} satisfies Config;