react-router.config.ts

摘要

此文件是可选的

React Router 框架配置文件，允许您自定义 React Router 应用程序的各个方面，如服务器端渲染、目录位置和构建设置。

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

export default {
  appDirectory: "app",
  buildDirectory: "build",
  ssr: true,
  prerender: ["/", "/about"],
} satisfies Config;

选项

`appDirectory`

app 目录的路径，相对于根目录。默认为 "app"。

export default {
  appDirectory: "src",
} satisfies Config;

`basename`

React Router 应用程序的 basename。默认为 "/"。

export default {
  basename: "/my-app",
} satisfies Config;

`buildDirectory`

构建目录的路径，相对于项目。默认为 "build"。

export default {
  buildDirectory: "dist",
} satisfies Config;

`buildEnd`

一个函数，在完整的 React Router 构建完成后被调用。

export default {
  buildEnd: async ({ buildManifest, serverBuildPath }) => {
    // Custom build logic here
    console.log("Build completed!");
  },
} satisfies Config;

`future`

启用的未来标志，用于选择性地使用即将推出的功能。

有关更多信息，请参阅未来标志。

export default {
  future: {
    // Enable future flags here
  },
} satisfies Config;

`prerender`

一个 URL 数组，用于在构建时将这些 URL 预渲染为 HTML 文件。也可以是一个返回数组的函数，用于动态生成 URL。

有关更多信息，请参阅预渲染。

export default {
  // Static array
  prerender: ["/", "/about", "/contact"],

  // Or dynamic function
  prerender: async ({ getStaticPaths }) => {
    const paths = await getStaticPaths();
    return ["/", ...paths];
  },
} satisfies Config;

`presets`

React Router 插件配置预设的数组，以便于与其他平台和工具集成。

有关更多信息，请参阅预设。

export default {
  presets: [
    // Add presets here
  ],
} satisfies Config;

`routeDiscovery`

配置客户端如何发现和加载路由。默认为 mode: "lazy" 并带有 manifestPath: "/__manifest"。

选项

mode: "lazy" - 路由在用户导航时被发现（默认）
- manifestPath - 使用 lazy 模式时，清单请求的自定义路径
mode: "initial" - 所有路由都包含在初始清单中

export default {
  // Enable lazy route discovery (default)
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/__manifest",
  },

  // Use a custom manifest path
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/custom-manifest",
  },

  // Disable lazy discovery and include all routes initially
  routeDiscovery: { mode: "initial" },
} satisfies Config;

有关更多信息，请参阅延迟路由发现。

`serverBuildFile`

服务器构建输出的文件名。此文件应以 .js 扩展名结尾，并应部署到您的服务器。默认为 "index.js"。

export default {
  serverBuildFile: "server.js",
} satisfies Config;

`serverBundles`

一个用于将路由分配到不同服务器捆绑包的函数。此函数应返回一个服务器捆绑包 ID，该 ID 将用作服务器构建目录中捆绑包的目录名。

有关更多信息，请参阅服务器捆绑包。

export default {
  serverBundles: ({ branch }) => {
    // Return bundle ID based on route branch
    return branch.some((route) => route.id === "admin")
      ? "admin"
      : "main";
  },
} satisfies Config;

`serverModuleFormat`

服务器构建的输出格式。默认为 "esm"。

export default {
  serverModuleFormat: "cjs", // or "esm"
} satisfies Config;

`ssr`

如果为 true，React Router 将在服务器端渲染您的应用程序。

如果为 false，React Router 将预渲染您的应用程序，并将其保存为带有您的资源的 index.html 文件，以便您的应用程序可以作为 SPA 部署而无需服务器渲染。有关更多信息，请参阅“SPA 模式”。

默认为 true。

export default {
  ssr: false, // disabled server-side rendering
} satisfies Config;