T
TanStack•13mo ago
adverse-sapphire

Importing routes with feature folder structure

I am wanting to implement Tanstack Router with file-based routing in my app but my app currently uses a feature style app structure. Currently I was thinking about reorganizing similar to Bulletproof Next js pages example repo. If I am store my Pages in a completely different "feature" folder, should I just be importing in the Router from within the Routes folder? For instance in my @features/Profile/pages.tsx, Can i do this: import Route from @/routes/profile or do I need to do: const route = getRouteApi('/profile')
4 Replies
fascinating-indigo
fascinating-indigo•13mo ago
virtual file routes could be an option here https://tanstack.com/router/v1/docs/framework/react/guide/virtual-file-routes
Virtual File Routes | TanStack Router React Docs
We'd like to thank the Remix team for . We've taken inspiration from their work and adapted it to work with TanStack Router's existing file-based route-tree generation. Virtual file routes are a power...
adverse-sapphire
adverse-sapphireOP•13mo ago
This looks like a good option. Thanks. I will read more into Virtual Routes Is there a downside to doing like this: 
export const Route = createFileRoute("/(authenticated)/(dashboard)/profile")({
  loader: () => useGetUserQuery(),
  component: () => <ProfilePage />,
});
export const Route = createFileRoute("/(authenticated)/(dashboard)/profile")({
  loader: () => useGetUserQuery(),
  component: () => <ProfilePage />,
});
// /features/Profile/pages/index.tsx
import Route as ProfileRoute from '@routes/(authenticated)/(dashboard)/profile/index.tsx'

export default ProfilePage = ()=> {
  const {useLoaderData} = ProfileRoute

  return <>
    <h1>Profile Page</h1>
  </>
}
// /features/Profile/pages/index.tsx
import Route as ProfileRoute from '@routes/(authenticated)/(dashboard)/profile/index.tsx'

export default ProfilePage = ()=> {
  const {useLoaderData} = ProfileRoute

  return <>
    <h1>Profile Page</h1>
  </>
}
fascinating-indigo
fascinating-indigo•13mo ago
this would create cyclic dependencies. if you want to do this, then use getRouteApi instead of importing ProfileRoute
adverse-sapphire
adverse-sapphireOP•13mo ago
Ah okay. Thanks a lot for the help.

Did you find this page helpful?