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

/workspaces/$id

, for example:

/workspaces/$id/help
/workspaces/$id/dashboard

/workspaces/$id/help
/workspaces/$id/dashboard

etc. There are also routes outside of

workspaces/$id

workspaces/$id

, but those that are under it should have a shared layout (mainly headerBar + sideBar + some data fetching + making sure the

$id

$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

- 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

route.tsx

is where I would

parseParams

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"

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

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/' | '/'

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

I'm not really sure why we have

$id

$id

link twice in ther now - once with slash and once without

. Since we are using

trailingSlash: 'always'

trailingSlash: 'always'

, the created links are really the same.

I think the root cause is that after creating

route.tsx

route.tsx

, we get a valid link towards

'/workspaces/$id'

'/workspaces/$id'

, which shouldn't be the case because

route.tsx

route.tsx

isn't really a page...

TanStack•2y ago•

111 replies

developed-pink

understanding layout routes

/workspaces/$id

/workspaces/$id

, for example:

/workspaces/$id/help
/workspaces/$id/dashboard

/workspaces/$id/help
/workspaces/$id/dashboard

etc. There are also routes outside of

workspaces/$id

workspaces/$id

, but those that are under it should have a shared layout (mainly headerBar + sideBar + some data fetching + making sure the

$id

$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

- 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

route.tsx

is where I would

parseParams

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"

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

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/' | '/'

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

I'm not really sure why we have

$id

$id

link twice in ther now - once with slash and once without

. Since we are using

trailingSlash: 'always'

trailingSlash: 'always'

, the created links are really the same.

I think the root cause is that after creating

route.tsx

route.tsx

, we get a valid link towards

'/workspaces/$id'

'/workspaces/$id'

, which shouldn't be the case because

route.tsx

route.tsx

isn't really a page...

understanding layout routes

Similar Threads

understanding layout routes

Similar Threads

Similar Threads

Similar Threads