eastern-cyan

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

flat-fuchsia•10mo 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...

eastern-cyanOP•10mo 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>
  </>
}

flat-fuchsia•10mo ago

this would create cyclic dependencies. if you want to do this, then use getRouteApi instead of importing ProfileRoute

eastern-cyanOP•10mo ago

Ah okay. Thanks a lot for the help.

Gaming

Programming

Importing routes with feature folder structure

Did you find this page helpful?