TanStackT
TanStack•2y ago•
111 replies
developed-pink

understanding layout routes

I'm having a hard time understanding layout routes. Maybe my use-case is a bit non-standard, but what I would like to achieve is the following scenario. We have a lot of routes per "workspace" that live under /workspaces/$id, for example:
/workspaces/$id/help
/workspaces/$id/dashboard


etc. There are also routes outside of workspaces/$id, but those that are under it should have a shared layout (mainly headerBar + sideBar + some data fetching + making sure the $id is a valid uuid etc.)

I thought about the following, file-based structure:

- routes
  - __root.tsx
  - workspaces
    - $id
      - help.tsx
      - dashboard.tsx
      - route.tsx


this "works", but it's not really a layout, or is it ? The route.tsx is where I would parseParams and render header + sideBar, because it will be rendered for all pages below it. One problem is that I then can additionally create urls that go to="/workspaces/$id" and it's seen as valid by the router, which I wouldn't really like because it is not a page that actually exists. So I thought about adding an index.tsx route that redirects to the help page, and that works fine at runtime, but now the router allows the following links to be created on type level:

'/workspaces/$id' | '/workspaces/$id/help' | '/workspaces/$id/dashboard' | '/workspaces/id/' | '/'


I'm not really sure why we have $id link twice in ther now - once with slash and once without 😅 . Since we are using trailingSlash: 'always', the created links are really the same.

I think the root cause is that after creating route.tsx, we get a valid link towards '/workspaces/$id', which shouldn't be the case because route.tsx isn't really a page...
Was this page helpful?