#Route segmenting and UI sections

1 messages · Page 1 of 1 (latest)

radiant chasm
#

Hi, I want to do exactly this, with other data, of course:

That is, to have a different route that gets drawn as a section in the UI.

I'm using folder routes, and the main view lives in app/routes/_auth.servicePoint.$id.edit/route.tsx and has currently this content:

export default function EditServicePoint() {
  return (
    <>
      <h1>Route</h1>
      <Outlet />
    </>
  )
}

Then I made app/routes/_auth.servicePoint.$id.edit/_linkDevice.tsx with this content:

export default function LinkDevice() {
  return (
    <p>Link device here.</p>
  )
}

And it doesn't appear in the UI.

Tried renaming _linkDevice.tsx to _index.tsx, and it also doesn't work.

Now, the documentation shows the graphic I attacked, with that alert when you hover over the top menu that says:

import("/invoice.js")
fetch("/invoice/{id}.json")

And then, on the following sections it talks about a complete different example. So I don't know if I'm misunderstanding the documentation and maybe what I'm trying to achieve is not possible, or if it's not possible with folder routes, or what.

I already know I can build a component and put it in there, but I want the loader/action to work on this section and to be independent from the main section.

So my questions are:

  1. can I show a section of the UI by providing the contents of such section in a different route?
  2. if (1) is "yes, you can", can I do it using folder routes?
  3. and if (1) and (2) are positive, how to I name the route so the Remix puts inside the bigger section?
radiant chasm
#

I'll reply myself: the route has to be named app/routes/_auth.servicePoint.$id.edit._index.tsx

#

But since this was a folder route, I tried putting it inside it:

$ ls app/routes/_auth.servicePoint.\$id.edit/
total 8
-rw-r--r-- 1 flc flc 108 2024-10-01 14:25 _index.tsx
-rw-r--r-- 1 flc flc 726 2024-10-01 14:24 route.tsx
#

And it didn't work

#

So the only way I found for it to work is to put that UI segment outside of the folder route, under the name stated before, which breaks the whole purpose of using folder routes to agglutinate related stuff.