Add support for routes.ts

[markdalgleish]

// app/routes.ts
import { type RoutesConfig } from "@react-router/dev/routes";

export const routes: RoutesConfig = [
  {
    path: "/",
    file: "routes/home.tsx",
    children: [
      {
        file: "routes/authenticated.tsx",
        children: [
          {
            file: "routes/inbox-index.tsx",
            index: true,
          },
          {
            path: "/:messageId",
            file: "routes/inbox-message.tsx",
          },
        ]
      },
      // ...
    ]
  },
];

To simplify this and make it more type-safe, route helpers are provided:

// app/routes.ts
import { type RoutesConfig, route, layout, index } from "@react-router/dev/routes";

export const routes: RoutesConfig = [
  route("/", "routes/home.tsx"),
  layout("routes/authenticated.tsx", [
    route("/inbox", "routes/inbox.tsx", [
      index("routes/inbox-index.tsx"),
      route("/:messageId", "routes/inbox-message.tsx"),
    ]),
    route("/sent", "routes/sent.tsx", [
      index("routes/sent-index.tsx"),
      route("/:messageId", "routes/sent-message.tsx"),
    ]),
  ]),
];

Remix v2 routes

For back compat of Remix's file-based routing API.

// app/routes.ts
import { type RoutesConfig } from "@react-router/dev/routes";
import { remixRoutes } from "@react-router/remix-v2-routes";

export const routes: RoutesConfig = remixRoutes();

With different root directory, relative to the app directory (default being "./routes"):

// app/routes.ts
import { type RoutesConfig } from "@react-router/dev/routes";
import { remixRoutes } from "@react-router/remix-v2-routes";

export const routes: RoutesConfig = remixRoutes({
  rootDirectory: "./remix-routes",
});

With custom routes:

// app/routes.ts
import { type RoutesConfig } from "@react-router/dev/routes";
import { remixRoutes } from "@react-router/remix-v2-routes";

export const routes: RoutesConfig = remixRoutes({
  ignoredRouteFiles: ["**/*"],
  routes: async (defineRoutes) => {
    return defineRoutes(route => {
      route("/path", "path/to/file.tsx")
    });
  }
});

With third-party Remix routing strategies, e.g. remix-flat-routes,

// app/routes.ts
import { type RoutesConfig } from "@react-router/dev/routes";
import { remixRoutes } from "@react-router/remix-v2-routes";
import { flatRoutes } from "remix-flat-routes";

export const routes: RoutesConfig = remixRoutes({
  ignoredRouteFiles: ["**/*"],
  routes: async (defineRoutes) => {
    return flatRoutes('routes', defineRoutes);
  },
});

Mixed usage

An array of multiple routing strategies can be exported. The resulting route manifests will be merged together. This is particularly useful when migrating from one routing strategy to another.

// app/routes.ts
import { type RoutesConfig, route} from "@react-router/dev/routes";
import { routes } from "@react-router/dev/routes";
import { remixRoutes } from "@react-router/remix-v2-routes";

export const routes: RoutesConfig = [
  route("/", "home.tsx"),
  
  ...await remixRoutes(),
];

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6f52a76

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[romansndlr]

Apologies for barging in, but can I ask what the benefit is of having to specify the /routes prefix for every route path? Can't we assume that 99.9% of apps will use this convention? Also, was wondering about having to import from @react-router/dev instead of react-router?

[markdalgleish]

Anything that's only required at dev time comes from @react-router/dev — the CLI, Vite plugin(s), and now route config logic. This helps keep it out of node_modules for production deployments, but also makes it clear that these things are meant to work together as a set.

In terms of the /routes prefix, I'm (currently) deliberately keeping defineRoutes pretty unopinionated since:

• You might prefer to structure your project based on features rather than "routes" at the top level.
• You might also be running a file system routing strategy in parallel, so you may already be using the routes directory for something else.

That said, there might be room to add a rootDirectory option like the @react-router/remix-v2-routes package provides.

[markdalgleish]

@romansndlr Oh and by the way, you're not barging in at all, I appreciate the feedback 🙂

[pcattori]

Couple notes from our discussion:

• Anything operating on the routes.ts at the module-level should be pluralized to "routes"
• Change package export to /routes both for consistency w/ routes.ts, but also so we don't need "route" prefix/suffix for the imports
• Change imports to import { routes, route, index, layout, ... } from "@react-router/dev/routes"
• Instead of dev, maybe something that conveys "framework" and "compile-time" semantics. Something like @react-router/framework @react-router/build. Then we can also have a /vite export on that.