frail-apricot

Naming convention for router

I haven't really looked into how this works exactly but I think it's catching up to me now and some files seem to need some changes in their name. The issue that I am facing is that the edit.tsx page and the $id.tsx page should both be children pages of the users.tsx page. Since that page controlls where they are headed towards when checking for a specific user in the table. Also it's starting to feel like I have missed something when I read the Route Tree & Nesting(https://tanstack.com/router/latest/docs/framework/react/guide/route-trees) guide on the website. To me it feels like a have created a mixture between both the flat routes choice and the directory choice and need some help changing this.

6 Replies

frail-apricotOP•14mo ago

I forgot to add that the dashboard directory is made for pages that are authenticated

passive-yellow•14mo ago

what is your actual question? can you please create a minimal complete example by forking one of the existing Stackblitz examples?

other-emerald•14mo ago

You may also want to read this https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts Off the bat, layout routes are done differently in terms of file conventions. Like Manuel mentioned, if you are having further trouble with this, please fork and example and create the necessary routes. We can help you from there.

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. The Root Route

frail-apricotOP•14mo ago

Okej so let me try to refactor my question a bit. Inside the docs under Route Tree & Nesting there are 2 examples on how to nest routes. The first one being the flat routes which from my understand is done like this dashboard.profile.tsx or dashboard.$id.tsx. The other alternative is the directory route which is being used in my project in a very wired way and I am not quite sure that I have followed it the correct way. My question then is. If I change my code into the flat routes version. Is there a way to structure the files in their own directories. So that everything about the dashboard.*.tsx is under a directory named dashboard ? https://stackblitz.com/edit/tanstack-router-gbcxxf?file=src%2Froutes%2Fdashboard.profile.tsx

other-emerald•14mo ago

Its not a either/or scenario. You can mix and match between nested and flat file structures. You can also use route-groups, if you run want to organize routes.

src/routes
  (dashboard)/
    dashboard.tsx
    dashboard.id.tsx
    dashboard.profile.tsx

src/routes
  (dashboard)/
    dashboard.tsx
    dashboard.id.tsx
    dashboard.profile.tsx

Personally, I mostly use flat routing, so I'd go with the route-groups, since all I'd be looking for is a way to group by "dashboard" routes in a folder, without having to worry about the URL.

frail-apricotOP•14mo ago

Thanks a lot for your help with this Sean 🙂 ❤️

Gaming

Programming

Naming convention for router

Did you find this page helpful?