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:
- can I show a section of the UI by providing the contents of such section in a different route?
- if (1) is "yes, you can", can I do it using folder routes?
- and if (1) and (2) are positive, how to I name the route so the Remix puts inside the bigger section?