Where do you put components used in multiple routes?

[ondrejsevcik]

I'm curious to hear where you put components that are used in multiple routes, especially in the context of large projects.

For some components (e.g., Button), it's easy to put them into the app/components folder.

But where do you put components that are used only by a handful of routes?
(e.g., a component that's used in 2 routes out of hundreds)

Thank you.

[do4Mother]

i created components folder under every routes. and put into main business logic.
for example let's say we have WalletCard, this component will use in 2 routes. Home and Wallet. then i just put it into Wallet component route.

[ondrejsevcik]

You mean like this?

- wallet
  - components
    - WalletCard.tsx
  - route.tsx // <-- this is using WalletCard
- home
  - route.tsx // <-- this is using WalletCard

[do4Mother]

yes, exactly! so far i don't have a problem with that structure. if we have global component then just put it into app/components. if scoped component then just put it into routes.

[sergiodxa]

IF it's used in multiple routes I put it in app/components

If it's used in only one route I put in app/routes/${route}/components

If it's used in only two routes, I duplicate it on each route components folder

If you don't want to duplicate it, then I would move it to app/components

[ondrejsevcik]

Is importing components between different routes an anti-pattern?

[sergiodxa]

It's not common, I personally like to consider each route as an individual app, you should be able to delete a whole route without affecting the rest of the app, that's why I prefer to move any shared code to outside routes folder, or just duplicate if it's only used in two places to avoid premature abstractions.