Make routes the default export in routes.ts (#12305)

Author: markdalgleish

decisions/0011-routes-ts.md

@@ -48,16 +48,6 @@ Remix ships with a default set of file system routing conventions. While conveni
 
 Any project using the Vite plugin must have a `routes.ts` file which exports an array of route config objects.
 
-### Route config is exported via the `routes` export
-
-We specifically chose to use the `routes` export instead of the more traditional `default` export you might expect in a config file. There are a couple of reasons for this:
-
-1. The `RouteConfig` type can be annotated up-front and inline (`export const routes: RouteConfig = [...]`).
-
-   In contrast, default exports either require a variable to be declared first (`let routes: RouteConfig = ...; export default routes;`), or they require the use of a `satisfies` annotation at the _end_ of the file (`export default ... satisfies RouteConfig`) which can be easy to miss when dealing with large route configs.
-
-2. In other areas of the framework we've come to prefer using named exports. We want to avoid introducing many different default exports that mean different things in different contexts. Named exports are much more self-documenting when looking at the file contents alone, especially if additional exports are added in the future.
-
 ### `routes.ts` is in the `app` directory
 
 There are a few reasons for this:

docs/explanation/type-safety.md

@@ -16,9 +16,9 @@ import {
   route,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   route("products/:id", "./routes/product.tsx"),
-];
+] satisfies RouteConfig;
 ```
 
 You can import route-specific types like so:

docs/how-to/file-route-conventions.md

@@ -20,7 +20,7 @@ Then use it to provide route config in your `app/routes.ts` file:
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;
 ```
 
 This will look for routes in the `app/routes` directory by default, but this can be configured via the `rootDirectory` option which is relative to your app directory:
@@ -29,9 +29,9 @@ This will look for routes in the `app/routes` directory by default, but this can
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes({
+export default flatRoutes({
   rootDirectory: "file-routes",
-});
+}) satisfies RouteConfig;
 ```
 
 The rest of this guide will assume you're using the default `app/routes` directory.

docs/how-to/form-validation.md

@@ -11,9 +11,14 @@ This guide walks you through implementing form validation for a simple signup fo
 We'll start by creating a basic signup route with form.
 
 ```ts filename=routes.ts
-import { route } from "@react-router/dev/routes";
-
-export const routes = [route("signup", "signup.tsx")];
+import {
+  type RouteConfig,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  route("signup", "signup.tsx"),
+] satisfies RouteConfig;
 ```
 
 ```tsx filename=signup.tsx

docs/index.md

@@ -66,7 +66,7 @@ import {
   prefix,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   index("./home.tsx"),
   route("about", "./about.tsx"),
 
@@ -81,7 +81,7 @@ export const routes: RouteConfig = [
     route(":city/:id", "./concerts/show.tsx")
     route("trending", "./concerts/trending.tsx"),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 You'll have access to the Route Module API, which most of the other features are built on.

docs/start/framework/routing.md

@@ -9,13 +9,16 @@ order: 2
 
 Routes are configured in `app/routes.ts`. Routes have a url pattern to match the URL and a file path to the route module to define its behavior.
 
-```tsx
-import { route } from "@react-router/dev/routes";
+```ts filename=app/routes.ts
+import {
+  type RouteConfig,
+  route,
+} from "@react-router/dev/routes";
 
-export const routes = [
+export default [
   route("some/path", "./some/file.tsx"),
   // pattern ^           ^ module file
-];
+] satisfies RouteConfig;
 ```
 
 Here is a larger sample route config:
@@ -29,7 +32,7 @@ import {
   prefix,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   index("./home.tsx"),
   route("about", "./about.tsx"),
 
@@ -43,7 +46,7 @@ export const routes: RouteConfig = [
     route(":city", "./concerts/city.tsx"),
     route("trending", "./concerts/trending.tsx"),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 If you prefer to define your routes via file naming conventions rather than configuration, the `@react-router/fs-routes` package provides a [file system routing convention.][file-route-conventions]
@@ -90,14 +93,14 @@ import {
   index,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   // parent route
   route("dashboard", "./dashboard.tsx", [
     // child routes
     index("./home.tsx"),
     route("settings", "./settings.tsx"),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 The path of the parent is automatically included in the child, so this config creates both `"/dashboard"` and `"/dashboard/settings"` URLs.
@@ -135,7 +138,7 @@ import {
   prefix,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   layout("./marketing/layout.tsx", [
     index("./marketing/home.tsx"),
     route("contact", "./marketing/contact.tsx"),
@@ -147,7 +150,7 @@ export const routes: RouteConfig = [
       route(":pid/edit", "./projects/edit-project.tsx"),
     ]),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 ## Index Routes
@@ -165,15 +168,15 @@ import {
   index,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   // renders into the root.tsx Outlet at /
   index("./home.tsx"),
   route("dashboard", "./dashboard.tsx", [
     // renders into the dashboard.tsx Outlet at /dashboard
     index("./dashboard-home.tsx"),
     route("settings", "./dashboard-settings.tsx"),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 Note that index routes can't have children.
@@ -191,7 +194,7 @@ import {
   prefix,
 } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   layout("./marketing/layout.tsx", [
     index("./marketing/home.tsx"),
     route("contact", "./marketing/contact.tsx"),
@@ -203,7 +206,7 @@ export const routes: RouteConfig = [
       route(":pid/edit", "./projects/edit-project.tsx"),
     ]),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 ## Dynamic Segments

docs/upgrading/component-routes.md

@@ -180,12 +180,12 @@ Create a file at `src/routes.ts` and add this:
 ```ts filename=src/routes.ts
 import { type RouteConfig } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   {
     path: "*",
     file: "src/catchall.tsx",
   },
-];
+] satisfies RouteConfig;
 ```
 
 And then create the catchall route module and render your existing root App component within it.
@@ -224,7 +224,7 @@ You can move the definition to a `routes.ts` file:
 ```tsx filename=src/routes.ts
 import { type RouteConfig } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   {
     path: "/pages/:id",
     file: "./containers/page.tsx",
@@ -233,7 +233,7 @@ export const routes: RouteConfig = [
     path: "*",
     file: "src/catchall.tsx",
   },
-];
+] satisfies RouteConfig;
 ```
 
 And then edit the route module to use the Route Module API:

docs/upgrading/remix.md

@@ -110,7 +110,7 @@ In React Router v7 you define your routes using the [`app/routes.ts`][routing] f
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;
 ```
 
 ### Step 6 - Rename components in entry files

docs/upgrading/router-provider.md

@@ -209,12 +209,12 @@ You can move the definition to a `routes.ts` file:
 ```tsx filename=src/routes.ts
 import { type RouteConfig } from "@react-router/dev/routes";
 
-export const routes: RouteConfig = [
+export default [
   {
     path: "/pages/:id",
     file: "./containers/page.tsx",
   },
-];
+] satisfies RouteConfig;
 ```
 
 And then edit the route module to use the Route Module API:

integration/fs-routes-test.ts

@@ -30,7 +30,7 @@ test.describe("fs-routes", () => {
           import { flatRoutes } from "@react-router/fs-routes";
           import { remixRoutesOptionAdapter } from "@react-router/remix-routes-option-adapter";
 
-          export const routes: RouteConfig = [
+          export default [
             ...await flatRoutes({
               ignoredRouteFiles: ["**/ignored-route.*"],
             }),
@@ -42,7 +42,7 @@ test.describe("fs-routes", () => {
                 route("/remix/config/route", "remix-config-route.tsx")
               });
             })
-          ];
+          ] satisfies RouteConfig;
         `,
         "app/root.tsx": js`
           import { Links, Meta, Outlet, Scripts } from "react-router";

integration/helpers/vite-cloudflare-template/app/routes.ts

@@ -1,4 +1,4 @@
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;

integration/helpers/vite-template/app/routes.ts

@@ -1,4 +1,4 @@
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;

integration/route-config-test.ts

@@ -59,9 +59,9 @@ test.describe("route config", () => {
       "app/routes.ts": js`
         import { type RouteConfig, index } from "@react-router/dev/routes";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default () => <div data-test-route>Test route 1</div>
@@ -109,14 +109,14 @@ test.describe("route config", () => {
     let files: Files = async ({ port }) => ({
       "vite.config.js": await viteConfig.basic({ port }),
       "app/routes.ts": js`
-        export { routes } from "./actual-routes";
+        export { default } from "./actual-routes";
       `,
       "app/actual-routes.ts": js`
         import { type RouteConfig, index } from "@react-router/dev/routes";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default () => <div data-test-route>Test route 1</div>
@@ -163,9 +163,9 @@ test.describe("route config", () => {
       "app/routes.ts": js`
         import { type RouteConfig, index } from "@react-router/dev/routes";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default () => <div data-test-route>Test route 1</div>
@@ -224,9 +224,9 @@ test.describe("route config", () => {
         import path from "node:path";
         import { type RouteConfig, index } from "@react-router/dev/routes";
 
-        export const routes: RouteConfig = [
+        export default [
           index(path.resolve(import.meta.dirname, "test-route.tsx")),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route.tsx": `
         export default () => <div data-test-route>Test route</div>