Unable to dialog routes to work

varndellwagglebee commented 9 months ago

We have several dialog boxes that we want to have routes.

Example: _private+ library/ glyphs/ _list new.tsx - this is our modal.

THank you in advanced.

kiliman commented 9 months ago

I'm not clear on the file structure. Can you run tree app/routes and paste the result inside a fenced block (3 backticks)?

Also, can you run npx remix routes to see how Remix configured your routes?

Thanks!

varndellwagglebee commented 9 months ago

We have printed out the routes and we can’t seem to get the dialog modal in a route.

We have a list of items. When you click on the name, we want a dialog box to appear with its own route. We’ve tried several different scenarios.

'routes/_private+/library/_layout': {

path: 'library',

index: undefined,

caseSensitive: undefined,

id: 'routes/_private+/library/_layout',

parentId: 'routes/_private+/_private',

file: 'routes/_private+/library/_layout.tsx'

},

'routes/_private+/library/glyphs/index': {

path: 'glyphs',

index: undefined,

caseSensitive: undefined,

id: 'routes/_private+/library/glyphs/index',

parentId: 'routes/_private+/library/_layout',

file: 'routes/_private+/library/glyphs/index.tsx'

},

'routes/_private+/library/glyphs/list/_list': {

path: 'list',

index: undefined,

caseSensitive: undefined,

id: 'routes/_private+/library/glyphs/list/_list',

parentId: 'routes/_private+/library/glyphs/index',

file: 'routes/_private+/library/glyphs/list/_list.tsx'

},

'routes/_private+/library/glyphs/list/new': {

path: 'list',     <<<<<<<<<<<<<<<<HERE

index: undefined,

caseSensitive: undefined,

id: 'routes/_private+/library/glyphs/list/_new',

parentId: 'routes/_private+/library/glyphs/index',

file: 'routes/_private+/library/glyphs/list/_new.tsx'

},

Annette Findley

Email: @.> @.

6531 Britannic Place

Frederick, MD 21703

From: Michael Carter @.> Sent: Tuesday, October 3, 2023 8:24 AM To: kiliman/remix-flat-routes @.> Cc: Annette Findley @.>; Author @.> Subject: Re: [kiliman/remix-flat-routes] Unable to dialog routes to work (Issue #76)

I'm not clear on the file structure. Can you run tree app/routes and paste the result inside a fenced block (3 backticks).

Also can you run npx remix routes to see how Remix configured your routes?

Thanks!

— Reply to this email directly, view it on GitHub https://github.com/kiliman/remix-flat-routes/issues/76#issuecomment-1744856834 , or unsubscribe https://github.com/notifications/unsubscribe-auth/A4AH6UENWXQZDUDHSZYS3NLX5P7WJAVCNFSM6AAAAAA5Q3NMROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONBUHA2TMOBTGQ . You are receiving this because you authored the thread. https://github.com/notifications/beacon/A4AH6UEVOGHSXAG7MH7URB3X5P7WJA5CNFSM6AAAAAA5Q3NMROWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTIABTQE.gif Message ID: @. @.> >

kiliman commented 9 months ago

Your issue is that remix-flat-routes treats the contents of glyphs/list/* as collocated files for the list route. When the final folder is a regular folder (not one ending with +), it will assume the contents are collocated.

So _list.tsx is the route module for the list route (because it starts with _). When it sees _new.tsx, it also thinks it's the module for the list route. That's why you get the same path attribute.

When you're inside a collocated folder, you can explicitly specify a file as being a new route module by adding the .route suffix: new.route.tsx.

❯ tree app/routes
app/routes
└── _private+
    └── library
        ├── _layout.tsx
        └── glyphs
            ├── index.tsx
            └── list
                ├── _list.tsx
                └── new.route.tsx

❯ npx remix routes
<Routes>
  <Route file="root.tsx">
    <Route path="library" file="routes-76/_private+/library/_layout.tsx">
      <Route path="glyphs" file="routes-76/_private+/library/glyphs/index.tsx">
        <Route path="list" file="routes-76/_private+/library/glyphs/list/_list.tsx">
          <Route path="new" file="routes-76/_private+/library/glyphs/list/new.route.tsx" />
        </Route>
      </Route>
    </Route>
  </Route>
</Routes>

varndellwagglebee commented 9 months ago

How would you do something like this path (_private+/data/$assetid/details/preview)?

I tried folder structure

_private+/

Data/

  $assetId/

       Details/

          Preview.route.tsx

routes/_private+/data/$assetId/details/preview.route': {

path: ':assetId/details/preview',

}

Annette Findley

Email: @.> @.

6531 Britannic Place

Frederick, MD 21703

From: Michael Carter @.> Sent: Tuesday, October 3, 2023 9:19 AM To: kiliman/remix-flat-routes @.> Cc: Annette Findley @.>; Author @.> Subject: Re: [kiliman/remix-flat-routes] Unable to dialog routes to work (Issue #76)

Your issue is that remix-flat-routes treats the contents of glyphs/list/* as collocated files for the list route. When the final folder is a regular folder (not one ending with +), it will assume the contents are collocated.

So list.tsx is the route module for the list route (because it starts with ). When it sees _new.tsx, it also thinks it's the module for the list route. That's why you get the same path attribute.

When you're inside a collocated folder, you can explicitly specify a file as being a new route module by adding the .route suffix: new.route.tsx.

❯ tree app/routes app/routes └── _private+ └── library ├── _layout.tsx └── glyphs ├── index.tsx └── list ├── _list.tsx └── new.route.tsx ❯ npx remix routes

— Reply to this email directly, view it on GitHub https://github.com/kiliman/remix-flat-routes/issues/76#issuecomment-1744964366 , or unsubscribe https://github.com/notifications/unsubscribe-auth/A4AH6UEDOSXFQLGQIXT5AALX5QGGBAVCNFSM6AAAAAA5Q3NMROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONBUHE3DIMZWGY . You are receiving this because you authored the thread. https://github.com/notifications/beacon/A4AH6UD7G2AB6BMGWH6M2QDX5QGGBA5CNFSM6AAAAAA5Q3NMROWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTIAIFQ4.gif Message ID: @. @.> >

kiliman commented 9 months ago

No offense, but your email responses are kind of hard to read because of the lack of formatting.

Anyway, I'm not sure what the question is. Based on your route, the path looks fine. It looks like it is nested under the data route.

Please run npx remix routes to see the route structure. It should look like the example in my previous response.

varndellwagglebee commented 9 months ago

Sorry about that. I figured what I need.

I have another question. I have a route’s file that has a redirect. However, the redirect isn’t getting hit. What we want to have happen, if I go to data/1/details route, it will redirect to data/1/details/settings

Annette Findley

Email: @.> @.

6531 Britannic Place

Frederick, MD 21703

From: Michael Carter @.> Sent: Tuesday, October 3, 2023 12:29 PM To: kiliman/remix-flat-routes @.> Cc: Annette Findley @.>; Author @.> Subject: Re: [kiliman/remix-flat-routes] Unable to dialog routes to work (Issue #76)

No offense, but your email responses are kind of hard to read because of the lack of formatting.

Anyway, I'm not sure what the question is. Based on your route, the path looks fine. It looks like it is nested under the data route.

Please run npx remix routes to see the route structure. It should look like the example in my previous response.

— Reply to this email directly, view it on GitHub https://github.com/kiliman/remix-flat-routes/issues/76#issuecomment-1745330236 , or unsubscribe https://github.com/notifications/unsubscribe-auth/A4AH6UGR574X4QTMBLOZ2KTX5Q4LZAVCNFSM6AAAAAA5Q3NMROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONBVGMZTAMRTGY . You are receiving this because you authored the thread. https://github.com/notifications/beacon/A4AH6UC3ZQ5M3BU2UVU2O3LX5Q4LZA5CNFSM6AAAAAA5Q3NMROWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTIA6QDY.gif Message ID: @. @.> >

varndellwagglebee commented 9 months ago

Hello Kiliman,

I wanted to let you know that I figured out the issue. I needed the “_”

Thank you again for your assistance.

Annette Findley

Email: @.> @.

6531 Britannic Place

Frederick, MD 21703

From: Michael Carter @.> Sent: Tuesday, October 3, 2023 12:29 PM To: kiliman/remix-flat-routes @.> Cc: Annette Findley @.>; Author @.> Subject: Re: [kiliman/remix-flat-routes] Unable to dialog routes to work (Issue #76)

No offense, but your email responses are kind of hard to read because of the lack of formatting.

Anyway, I'm not sure what the question is. Based on your route, the path looks fine. It looks like it is nested under the data route.

Please run npx remix routes to see the route structure. It should look like the example in my previous response.

— Reply to this email directly, view it on GitHub https://github.com/kiliman/remix-flat-routes/issues/76#issuecomment-1745330236 , or unsubscribe https://github.com/notifications/unsubscribe-auth/A4AH6UGR574X4QTMBLOZ2KTX5Q4LZAVCNFSM6AAAAAA5Q3NMROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONBVGMZTAMRTGY . You are receiving this because you authored the thread. https://github.com/notifications/beacon/A4AH6UC3ZQ5M3BU2UVU2O3LX5Q4LZA5CNFSM6AAAAAA5Q3NMROWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTIA6QDY.gif Message ID: @. @.> >

kiliman / remix-flat-routes

Unable to dialog routes to work #76