react-router.config.ts

• Framework
• Data
• Declarative

Summary

Reference Documentation ↗

React Router framework configuration file that lets you customize aspects of your React Router application like server-side rendering, directory locations, and build settings.

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

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

Options

appDirectory

The path to the app directory, relative to the root directory. Defaults to "app".

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

basename

The React Router app basename. Defaults to "/".

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

buildDirectory

The path to the build directory, relative to the project. Defaults to "build".

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

buildEnd

A function that is called after the full React Router build is complete.

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

future

Enabled future flags for opting into upcoming features.

See Future Flags for more information.

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

prerender

An array of URLs to prerender to HTML files at build time. Can also be a function returning an array to dynamically generate URLs.

See Pre-Rendering for more information.

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

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

presets

An array of React Router plugin config presets to ease integration with other platforms and tools.

See Presets for more information.

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

routeDiscovery

Configure how routes are discovered and loaded by the client. Defaults to mode: "lazy" with manifestPath: "/__manifest".

Options:

• mode: "lazy" - Routes are discovered as the user navigates (default)
  • manifestPath - Custom path for manifest requests when using lazy mode
• mode: "initial" - All routes are included in the initial manifest

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;

See Lazy Route Discovery for more information.

serverBuildFile

The file name of the server build output. This file should end in a .js extension and should be deployed to your server. Defaults to "index.js".

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

serverBundles

A function for assigning routes to different server bundles. This function should return a server bundle ID which will be used as the bundle's directory name within the server build directory.

See Server Bundles for more information.

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

serverModuleFormat

The output format of the server build. Defaults to "esm".

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

ssr

If true, React Router will server render your application.

If false, React Router will pre-render your application and save it as an index.html file with your assets so your application can be deployed as a SPA without server-rendering. See "SPA Mode" for more information.

Defaults to true.

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