rival-black

Code-based routing structure in bigger apps

Hey folks! I’m using code-based routing in a larger app (not file-based), and I’m struggling a bit with how to organize routes properly. Because of circular dependencies, I had to split each route from its addChildren() definition (route tree). On top of that, re-exporting routes from a central @router/index.ts alias causes circular issues when one route imports another via the alias. So now I’m left with long relative imports everywhere, and I’m wondering: How do you structure your routes in code-based routing at scale? - Do you use alias like @routes? - Do you colocate route + routeTree? - How do you avoid circulars and keep things clean? Any patterns or real-world examples appreciated Thank you!

10 Replies

rare-sapphire•3mo ago

why do you have circular dependencies?

rival-blackOP•3mo ago

Thanks for reply. Imagine I have a root route and a child route. Root route

import {SomeRoute} from "./SomeRoute"

export const RootRoute = createRootRoute({
  component: () => <div />
})

export const rootRouteTree = RootRoute.addChildren([SomeRoute]);

import {SomeRoute} from "./SomeRoute"

export const RootRoute = createRootRoute({
  component: () => <div />
})

export const rootRouteTree = RootRoute.addChildren([SomeRoute]);

Child route

import {RootRoute} from "@router"

export const SomeRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "/something"
});

import {RootRoute} from "@router"

export const SomeRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "/something"
});

In this case, RootRoute imports SomeRoute, and SomeRoute imports RootRoute back via alias → which points to index.ts → circular dependency → app crashes at runtime (Cannot find module, undefined, etc.).

rare-sapphire•3mo ago

cant you build the route tree in a separate file?

rival-blackOP•3mo ago

Yeah, that's exactly what I'm doing, it works great and avoids the circulars. My question was more about how people structure their routes in larger apps, especially when you end up with separate file for every foute, dedicated parent routes, and separate route trees for each parent route. It can turn into a lot of files, so I was curious, if people colocate routes with their trees, or use specific folder structures to keep it manageable 🙂

rare-sapphire•3mo ago

TBH why not go file based then 😄

rival-blackOP•3mo ago

Yeah I know. File-based would totally solve this -it's much simpler when it comes to structure. But I'm kinda torn between the two approaches. I really like having my pages, hooks, types and related logic all together, it just feels cleaner and easier to mantain. But hey, maybe I'll give it a shot 😄

rare-sapphire•3mo ago

what do you mean by "I really like having my pages, hooks, types and related logic all together" how is that not possible with file based routing?

rival-blackOP•3mo ago

Yeah, totally fair - it's definitely possible with file-based routing. I guess what I meant is: let's say I have a users module under /modules/users where I keep everything together - pages, hooks, schemas, components, etc. With file-based routing, I'd need to move my route pages into /routes/users/..., separating them from the rest of the module. It’s not a huge deal, just breaks the nice co-location I like. But yeah, I get that it’s mostly just a matter of getting used to a different structure

rare-sapphire•3mo ago

you could just put all the hooks/components into the same folder as the routes you just need to make sure they are not treated as routes which is what you can achieve with routeFileIgnorePrefix or routeFileIgnorePattern

rival-blackOP•3mo ago

Ah thanks - I totally missed that in the docs! Using routeFileIgnorePrefix or routeFileIgnorePattern actually makes a lot of sense, especially if I want to keep all logic together. I’ll probably try it now. Maybe I’m just overcomplicating things 😄
Really appreciate the tip!

Gaming

Programming

Code-based routing structure in bigger apps

Did you find this page helpful?