Route modal - once route modal loaded , previous content getting wiped/replaced

[cliffordfajardo]

NOTE: Using Remix v1 routing system

Goal
Trying to create a route base modal.
Currently using Remix v1 routes file system routing

Background context

1. A user is on /dci/metro/visualizer/$device_name route
2. User clicks device which adds a /detail to the existing URL
   • before clicking device: /dci/metro/visualizer/$device_name
   • after clicking device (which triggers modal route): /dci/metro/visualizer/$device_name/detail

├── dci
│  ├── metro
│  │  └── visualizer
│  │     └── ($device)
│  │        ├── detail.tsx (modal route)
│  │        └── index.tsx. (devices visualization)

Challenge / Observations:
Once the /detail route is active AKA we are now on this route /dci/metro/visualizer/$device_name/detail,
The modal appears for brief half-second
Previous content gets wiped completely
Modal doesnt show

Question:
How do I get my route modal to appear directly over the previous content I had?

• Before modal route is active, the route is: /dci/metro/visualizer/$device_name
• After modal route is active, the route is: /dci/metro/visualizer/$device_name/detail

CleanShot.2023-10-09.at.08.06.00.mp4

[cliffordfajardo]

Ran npx remix routes and got this:

Ran npx remix routes and got this:

<Routes>
  <Route file="root.tsx">
    <Route path="dci/metro/visualizer/:device?/detail" index file="routes/dci/metro/visualizer/($device)/detail/index.tsx" />
    <Route path="dci/metro/visualizer/:device?" index file="routes/dci/metro/visualizer/($device)/index.tsx" />
  </Route>
</Routes>

Looks like /detail route is not nested as I thought it was according to the generated route config 🤔

I was expecting the generated output to look like this:

<Routes>
  <Route file="root.tsx">
    <Route path="dci/metro/visualizer/:device?" file="routes/dci/metro/visualizer/($device)/detail/index.tsx">
      <Route path="dci/metro/visualizer/:device?/detail" index file="routes/dci/metro/visualizer/($device)/index.tsx" />
    </Route>
    
  </Route>
</Routes>

This explains why my Outlet isn't working as expected 🤔

[sergiodxa]

├── dci
│  ├── metro
│  │  └── visualizer
│  │     └── ($device)
│  │        ├── detail.tsx (modal route)
│  │        └── index.tsx. (devices visualization)

Here detail and index are at the same level.

You need to either open the modal without using nested routes (remove detail) or if you want to make it linkable make detail a nested route of the visualization.

[cliffordfajardo]

I tried to make /detail (the route file containing the modal) a nested route of /visualization:

routes folder:

├── dci
│  ├── metro/
│  │  └── visualizer/
│  │     ├── detail/
│  │     │  └── index.tsx
│  │     └── index.tsx

 but the generated code according to `npx remix routes` is generating this:

```tsx
<Routes>
  <Route file="root.tsx">
  <Route path="dci/metro/visualizer" index file="routes/dci/metro/visualizer/index.tsx" />
  <Route path="dci/metro/visualizer/detail" index file="routes/dci/metro/visualizer/detail/index.tsx" />
</Routes>

Was expecting it to output something like this:

<Routes>
  <Route file="root.tsx">
    <Route path="dci/metro/visualizer"  file="routes/dci/metro/visualizer.tsx">
      <Route path="detail" file="routes/dci/metro/visualizer/detail.tsx" />
    </Route>
  </Route>
</Routes>

Going to play around with not using index as the file name, I think thats affecting the route generation

[cliffordfajardo]

UPDATE:
Ok so I was playing around with different remix file/folder naming conventions and I think I've found my original issue.
I had an incomplete mental model for how the route generation worked
Haven't played with remix v2 routes yet, but probably similar.

✅ Generates nested routes in the way I was originally looking for

Folder structure	Generated routes (`npx remix routes`)
routes ├── dci │ ├── metro/ │ │ ├── visualizer/ │ │ │ └── detail.tsx │ │ └── visualizer.tsx	<Routes> <Route file="root.tsx"> <Route path="dci/metro/visualizer" file="routes/dci/metro/visualizer.tsx"> <Route path="detail" file="routes/dci/metro/visualizer/detail.tsx" /> </Route> </Route> </Routes>

❌ Doesnt generates nested routes as I originally thought (using index.tsx)

Folder structure	Generated routes (`npx remix routes`)
routes ├── dci │ ├── metro/ │ │ └── visualizer/ │ │ ├── detail/ │ │ │ └── index.tsx │ │ └── index.tsx	<Routes> <Route file="root.tsx"> <Route path="dci/metro/visualizer" index file="routes/dci/metro/visualizer/index.tsx" /> <Route path="dci/metro/visualizer/detail" index file="routes/dci/metro/visualizer/detail/index.tsx" /> </Routes>

[kiliman]

Yes, in v1 routing, index.tsx generates an index route. In v2 routing, they changed it to _index.tsx

Index routes can't have child routes. That's why there is no nesting.

[cliffordfajardo]

Updating the thread with working solution of the original question

✅ Working code (doesnt make use of `index.tsx)

Folder structure	Verify Generated routes (`npx remix routes`)
├── dci │ ├── index.tsx │ ├── metro │ │ └── visualizer │ │ ├── ($device) │ │ │ └── detail.tsx │ │ └── ($device).tsx	<Routes> <Route file="root.tsx"> <Route path="dci/metro/visualizer/:device?" file="routes/dci/metro/visualizer/($device).tsx"> <Route path="detail" file="routes/dci/metro/visualizer/($device)/detail.tsx" /> </Route> </Route> </Routes>

❌ Previously incorrect code
I was incorrectly using index.tsx thinking I would still be able to generated nested routes by simply nesting folders.
See @kiliman comment above for clairifaction:

Yes, in v1 routing, index.tsx generates an index route. In v2 routing, they changed it to _index.tsx
Index routes can't have child routes. That's why there is no nesting.

Folder structure	Generated routes (`npx remix routes`)
routes ├── dci │ ├── metro/ │ │ └── visualizer/ │ │ ├── detail/ │ │ │ └── index.tsx │ │ └── index.tsx	<Routes> <Route file="root.tsx"> <Route path="dci/metro/visualizer" index file="routes/dci/metro/visualizer/index.tsx" /> <Route path="dci/metro/visualizer/detail" index file="routes/dci/metro/visualizer/detail/index.tsx" /> </Routes>