Is it possible to make a totally self-contained module of routes?

reacttypescript

Suppose that I have a “settings” page which will have many subroutes. Currently, I am doing something like this on each page:

// settings/account/index.ts
import { createFileRoute } from “@tanstack/react-router”;
import AccountSettings from “./account-settings”;

export const Route = createFileRoute(“/settings/account”)({
  component: Settings,
});

// settings/account/index.ts
import { createFileRoute } from “@tanstack/react-router”;
import AccountSettings from “./account-settings”;

export const Route = createFileRoute(“/settings/account”)({
  component: Settings,
});

Then in my

routes.tsx

routes.tsx

file, I do something like this:

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  route(“/settings”, “app/settings/index.ts”, [
    route(“/account”, “app/settings/account/index.ts”)
  ]),
]);

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  route(“/settings”, “app/settings/index.ts”, [
    route(“/account”, “app/settings/account/index.ts”)
  ]),
]);

I was just wondering, is it possible to create some sort of root route at

settings

settings

and define the structure from there, then simply import that and use it in my routes file? i.e.

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  // this is ultimately what I want
  // `/settings` now also handles the routing for it’s sub-routes
  route(“/settings”, “app/settings/index.ts”),
]);

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  // this is ultimately what I want
  // `/settings` now also handles the routing for it’s sub-routes
  route(“/settings”, “app/settings/index.ts”),
]);

TanStack•4w ago•

5 replies

brilliant-lime

Is it possible to make a totally self-contained module of routes?

reacttypescript

Suppose that I have a “settings” page which will have many subroutes. Currently, I am doing something like this on each page:

// settings/account/index.ts
import { createFileRoute } from “@tanstack/react-router”;
import AccountSettings from “./account-settings”;

export const Route = createFileRoute(“/settings/account”)({
  component: Settings,
});

// settings/account/index.ts
import { createFileRoute } from “@tanstack/react-router”;
import AccountSettings from “./account-settings”;

export const Route = createFileRoute(“/settings/account”)({
  component: Settings,
});

Then in my

routes.tsx

routes.tsx

file, I do something like this:

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  route(“/settings”, “app/settings/index.ts”, [
    route(“/account”, “app/settings/account/index.ts”)
  ]),
]);

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  route(“/settings”, “app/settings/index.ts”, [
    route(“/account”, “app/settings/account/index.ts”)
  ]),
]);

I was just wondering, is it possible to create some sort of root route at

settings

settings

and define the structure from there, then simply import that and use it in my routes file? i.e.

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  // this is ultimately what I want
  // `/settings` now also handles the routing for it’s sub-routes
  route(“/settings”, “app/settings/index.ts”),
]);

export const routes = rootRoute(“root.tsx”, [
  index(“app/index.ts”),
  // this is ultimately what I want
  // `/settings` now also handles the routing for it’s sub-routes
  route(“/settings”, “app/settings/index.ts”),
]);

Is it possible to make a totally self-contained module of routes?

Similar Threads

Is it possible to make a totally self-contained module of routes?

Similar Threads

Similar Threads

Similar Threads