v2_routeConvention - routes/_index/route.tsx not rendering

[mccuna]

What version of Remix are you using?

1.13.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Create a new Remix project ("Just the basics + Remix App Server")
2. Enable v2_routeConvention
3. Move routes/index.tsx to routes/_index/route.tsx

Expected Behavior

When running locally (npm run dev), accessing http://localhost:3000 renders the routes/_index/route.tsx route.

Actual Behavior

When running locally (npm run dev), accessing http://localhost:3000 doesn't render the routes/_index/route.tsx route.

Here is a repo reproducing the issue: https://github.com/mccuna/routes-v2-index-folder

[SleeplessByte]

The same issue can be experience with any route folder name, aka. app/routes/tracks/route.tsx also doesn't work. It doesn't need to be named _index.

[kiliman]

_index is only used for index routes. Those are the routes that end with /, like /, /users/, etc.

index.tsx should only be used if you're using colocation (folders) and it's the module index.

When you have issues with routing, it's helpful if you include the route file structure tree app/routes as well as the output from npx remix routes.

[SleeplessByte]

In my case those two commands yield the following:

path\to\APP\ROUTES
└───tracks

This is the windows output. The actual tree structure is:

├───tracks
│   └───route.tsx
├───_index.tsx
├───_users.auth.apple.tsx
├───_users.auth.facebook.tsx
├───_users.auth.google.tsx
├───_users.auth.spotify.tsx
├───_users.login.tsx
├───_users.logout.tsx
├───_users.profile.tsx
├───_users.register.tsx
├───_users.secret.edit.tsx
├───_users.secret.new.tsx
├───auditions.tsx
├───competitions.tsx
├───oauth.callbacks.$provider.tsx
├───oauth.callbacks.apple.tsx
├───oauth.callbacks.facebook.tsx
├───oauth.callbacks.google.tsx
├───oauth.callbacks.spotify.tsx
├───oauth.delete.facebook.tsx
└───oauth.wait-for-session.tsx

<Routes>
  <Route file="root.tsx">
    <Route path="auditions" file="routes\\auditions.tsx" />
    <Route path="competitions" file="routes\\competitions.tsx" />
    <Route path="oauth/callbacks/:provider" file="routes\\oauth.callbacks.$provider.tsx" />
    <Route path="oauth/callbacks/apple" file="routes\\oauth.callbacks.apple.ts" />
    <Route path="oauth/callbacks/facebook" file="routes\\oauth.callbacks.facebook.ts" />
    <Route path="oauth/callbacks/google" file="routes\\oauth.callbacks.google.ts" />
    <Route path="oauth/callbacks/spotify" file="routes\\oauth.callbacks.spotify.ts" />
    <Route path="oauth/delete/facebook" file="routes\\oauth.delete.facebook.ts" />
    <Route path="oauth/wait-for-session" file="routes\\oauth.wait-for-session.tsx" />
    <Route index file="routes\\_index.tsx" />
    <Route path="auth/apple" file="routes\\_users.auth.apple.ts" />
    <Route path="auth/facebook" file="routes\\_users.auth.facebook.ts" />      
    <Route path="auth/google" file="routes\\_users.auth.google.ts" />
    <Route path="auth/spotify" file="routes\\_users.auth.spotify.ts" />        
    <Route path="login" file="routes\\_users.login.tsx" />
    <Route path="logout" file="routes\\_users.logout.ts" />
    <Route path="profile" file="routes\\_users.profile.tsx" />
    <Route path="register" file="routes\\_users.register.tsx" />
    <Route path="secret/edit" file="routes\\_users.secret.edit.tsx" />
    <Route path="secret/new" file="routes\\_users.secret.new.tsx" />
  </Route>
</Routes>

This can be simplified to:

├───tracks
│   └───route.tsx
├───_index.tsx
├───_users.login.tsx
└───auditions.tsx

<Routes>
  <Route file="root.tsx">
    <Route path="auditions" file="routes\\auditions.tsx" />
    <Route index file="routes\\_index.tsx" />
    <Route path="login" file="routes\\_users.login.tsx" />
  </Route>
</Routes>

As you can see I followed the docs to migrate to v2, which is why I barely have any folders, because it only tells you you can use folders at the end of the article.

[kiliman]

Yes, v2 routing is flat routes.

The entire route is either the filename <routename>.tsx or the folder name <routename>/index.tsx. Folders are only used for colocation, not organization. You should not have any folders between routes folder and your leaf route.

Nesting is denoted by . separators where the child route has a matching prefix with the parent route. New routes will always repeat it's parent route name.

Like users.edit.tsx would nest under users.tsx because of the common prefix users

Anyway, with that being said, it looks like you're missing some of the layout routes.

You should have a _users.tsx route, the parent layout for all the _users.* routes. Pathless layouts (ones with _ prefix), should have a layout file.

[diurivj]

Hey there, I just had the same issue:

This works

app/routes
├── _index.tsx
├── app.profile._index.tsx
├── app.profile.edit.tsx
├── app.profile.tsx
├── app.tsx

This doesn't work

app/routes
├── _index.tsx
├── app.profile
│   └── route.tsx
├── app.profile._index
│   └── route.tsx
├── app.profile.edit
│   └── route.tsx
├── app.tsx

Error: Path "/app/profile" defined by route "app.profile._index/route" conflicts with route "app.profile/route"

[kiliman]

Looks like a bug in Remix v2 routes. My remix-flat-routes package handles this correctly.

❯ tree app/routes-5490          
app/routes-5490
├── _index.tsx
├── app.profile
│   └── route.tsx
├── app.profile._index
│   └── route.tsx
├── app.profile.edit
│   └── route.tsx
└── app.tsx

❯ npx remix routes    
<Routes>
  <Route file="root.tsx">
    <Route path="app" file="routes-5490/app.tsx">
      <Route path="profile" file="routes-5490/app.profile/route.tsx">
        <Route path="edit" file="routes-5490/app.profile.edit/route.tsx" />
        <Route index file="routes-5490/app.profile._index/route.tsx" />
      </Route>
    </Route>
    <Route index file="routes-5490/_index.tsx" />
  </Route>
</Routes>

[SleeplessByte]

Yes, I believe that's exactly what the issue described as v2_routeConvention is not related to your flat routes package, right?

[mccuna]

I might be mistaken, but I believe the issue has been solved as part of #5459 . I've upgraded the repo reproducing the issue to the nightly version (0.0.0-nightly-aecf731-20230222) and the issue seems to be solved.

Not sure if I should close the issue now, or wait for the next stable version to be released.

[SleeplessByte]

You should have a _users.tsx route, the parent layout for all the _users.* routes. Pathless layouts (ones with _ prefix), should have a layout file.

FYI, not that it matters for this issue, but these routes are only written the way they are because they were a folder in v1, and they don't render anything, so they don't need a layout. Adding a layout also doesn't change the outcome.

The bug indeed seems to be fixed with #5459. As far as I am personally concerned @mccuna , I generally close tickets when they are fixed, not when they are published, so I think this can be closed?

[kiliman]

@SleeplessByte ok... hard to say what the intent was. I'm just not sure why have a pathless layout without an actual layout file.

[SleeplessByte]

They are loader / action oauth redirection paths. They don't render, they always redirect :)