Correct way to do route masking in file based

[tigawanna]

Just tried out route masking with file based and it seems to work but doesn't show the modal on top of the current data like in the docs demos

[7hourspg]

@tigawanna Did you found any solution?? i'm also on the same page the code based routing is working fine but file based routing not showing the parent in background.

[7hourspg]

@tannerlinsley still waiting for the solution.

[haswalt]

So I couldn't get this to work either as expected. This is the issue as I see it, whe using file based routes the route is defined by the file/folder structure rathar than a given path string. In the example the mask and route and configured together WITH the parent route being set.

With file based routing the parent is set based on the directory structure, so in the photos example all of

/photos -> /photos/$photoId
/photos -> /photos/$photoId/model

I.E. have their parent set to /photos because they are programatically defined.

With file based routing whilst you'd expect a folder strucure of:

/posts/index.tsx -> /protos
/photos/$photoId.tsx -> /photos/1234
/photos/$photoId/model.tsx -> /photos/1234/modal

matching to to work the same the relationship actually looks like:

/photos -> /photos/$photoId
/photos/$photoId -> /photos/$photoId/model

I've got it working in my own project but there's an important bit to understand about route hierachy and how siblings and nesting is calculated which may not be obvious at first. It's important to note that unless there is a path parameter the router sees it as a sibling.

My project shows a modal to create new items with the following structure:

locations.tsx -> /locations
locations/new.tsx -> /locations/new
locations/new_modal.tsx -> /locations/new_modal

And /locations/new_modal is masked to /locations/new resulting in the modal being shown over my list view without changing the view.

To then make a direct link to /locations/new I had to actually pull my file out of the directory to make use of the _ suffix this like:

locations_.new.tsx

This allowed this to render in the root tree not in the location tree. There might be a better way to do this as realy I'd like to keep all the files in the locations folder to maintain a clean structure but I'm not sure it's possible.

Sorry not the most concise description but I was writing this whilst fixing it on my project. Hopefully it helps.

@tannerlinsley If I get time i'll get an example prepared for the docs as this is a complicated thing to work out from the current examples but a common use case.

[kooroshkz]

Hey! I ran into this too — the key is how file-based routing sets parent/child relationships by folder structure, not by route path like in code-based routing.

If your modal route isn’t showing over the background page, it’s likely because the parent-child hierarchy isn’t set right. You can try this:

• Use a _ suffix like locations_.new.tsx to move a route to the root layout instead of nesting it inside /locations.
• Then use mask: '/locations/new' to overlay it like a modal.

Yeah, it’s a bit tricky — would love better docs on this too.
If this helps, feel free to mark this as the answer so others can find it. Thanks!

[7hourspg]

hey i don't get it. this is how my file look like

@haswalt @kooroshkz

[haswalt]

So your photos_. File would need to be alongside the photos directory not inside it

[haswalt]

Here's a small example from my working demo of how my files are structured. In the end I ended up just going without directories to make it a bit clearer what washappening.

You'll see that there's no . between $locationId and modal otherwise it nests it again.

[7hourspg]

man sorry for disturbing you maybe i'm dumb or something but still don't get it

        <Link to="/photos/$id/modal"
            params={{id: product.id}}
            mask={{
              to: "/photos/$id",
              unmaskOnReload: true,
              params: {
                id: product.id,
              },
            }}
            key={product.id}
          >

src/
├── _components/
│   ├── modal.tsx
│   └── navbar.tsx
├── assets/
├── routes/
│   ├── __root.tsx
│   ├── about.tsx
│   ├── index.tsx
│   ├── photos__$id_modal.tsx
│   ├── photos.$id.tsx
│   └── photos.index.tsx

can you please tell me exactly how that file name should be and also what should be my url ??

[haswalt]

ok so you can't have the . before modal, that will result in it treating it as a extra nesting. You're written folder structure is closer to what you actually want.

/photos -> photos.tsx
/photos/2134 -> photos.$id.tsx

So to make your modal work you need to make sure you have an <Outlet /> in your photos.tsx and then your modal file would want to be photos.{$id}_modal.tsx. The {} allows the param to be only $id but this means it's only nested between photos.tsx.

Your unmasked route (aka the direct link) would then be photos.$id.tsx.

When linking you want to use:

<Link
  to="/photos/{$Id}_modal"
  params={{ id: product.id }}
  mask={{
    to: "/photos/$id",
    params: { id: product.id }
  }}
>Click Me</Link>

[haswalt]

Let me know if not clear and i'll out a demo repo up with working code in it for you.

[7hourspg]

still getting params error can you fix here https://github.com/7hourspg/tanstack-modal-route. i'm trying to fix this issue from last 5 months please.

[haswalt]

@7hourspg no problem. Fixed here: https://github.com/haswalt/tanstack-modal-route-demo

[7hourspg]

Thank you so much bro.