プリセット

React Router configは、他のツールやホスティングプロバイダーとの統合を容易にするため、presetsオプションをサポートしています。

Presetsは以下の2つのことだけを行うことができます。

React Router config オプションを代理で設定する
解決された config を検証する

各presetによって返されるconfigは、presetが定義された順序でマージされます。React Router config で直接指定されたconfigは、最後にマージされます。これは、あなたのconfigが常にpresetよりも優先されることを意味します。

preset config を定義する

基本的な例として、server bundles functionを設定するpresetを作成してみましょう。

my-cool-preset.ts

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";
      },
    }),
  };
}

config を検証する

他のpresetやユーザーconfigは、あなたのpresetから返された値をまだオーバーライドできるということに留意してください。

私たちのpresetの例では、serverBundles関数は、異なる、競合する実装でオーバーライドされる可能性があります。最終的に解決されたconfigに、私たちのpresetからのserverBundles関数が含まれていることを検証したい場合は、reactRouterConfigResolved hookを使用できます。

my-cool-preset.ts

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 hookは、あなたのpresetのconfigをマージしたりオーバーライドしたりすることがエラーとなる場合にのみ使用されるべきです。

preset を使用する

Presetは、npmに公開され、React Router config 内で使用されるように設計されています。

react-router.config.ts

import type { Config } from "@react-router/dev/config";
import { myCoolPreset } from "react-router-preset-cool";
 
export default {
  // ...
  presets: [myCoolPreset()],
} satisfies Config;

preset config を定義する
config を検証する
preset を使用する