V2 routing root index path issue

[TheRealFlyingCoder]

What version of Remix are you using?

1.11.0

Steps to Reproduce

npx create-remix@latest

Switch to V2 routing, and run remix routes

Expected Behavior

After the 1.11 update, leaf index.tsx routes should be recognised by the routing system (This works with remix-flat-routes).

/routes/index.tsx

<Route index file="routes/index.tsx" />

/routes/test/index.tsx

<Route path="test" file="routes/test/index.tsx" />

Actual Behavior

/routes/index.tsx

<Route path="index" file="routes/index.tsx" />

/routes/test/index.tsx

<Route path="test" file="routes/test/index.tsx" />

[machour]

Can you check if 1.11.1 works for you?
https://github.com/remix-run/remix/releases/tag/remix%401.11.1

[Deanmv]

I'm seeing the same issue on 1.11.1 as well.

If I have app/routes/_index.tsx then I get the correct output from remix routes of:
<Route index file="routes/_index.tsx" />

When changing the filename to app/routes/index.tsx then the output of remix routes changes to:
<Route path="index" file="routes/index.tsx" />

My content then does not appear at localhost:3000

I've made a repo to reproduce is here - https://github.com/Deanmv/remix-issue-5216

[kiliman]

@Deanmv index routes in v2 routing must be named _index.tsx. Naked index.tsx only works as the route file in flat-folders convention.

flat-files
routes/test.tsx => /test layout
routes/test._index.tsx => /test/ index route

flat-folders
routes/test/index.tsx => /test layout
routes/test._index/index.tsx => /test/ index route

[Deanmv]

@kiliman ah, looks like I've misunderstood that then. Ignore me 😄

Thanks for the example!

[ianhernandez]

Routes can also be folders with a conventional index.tsx file inside defining the route module. The rest of the files in the folder will not become routes. This allows you to organize your code closer to the routes that use them instead of repeating the feature names across other folders.

Route File Naming (v2) #folders-for-organization

By "Can also" does that mean by opting into the v1 convention? or that you can use index.tsx in folders with new v2 conventions.

[machour]

@ianhernandez it's for V2

[kiliman]

@ianhernandez the "can also" refers to v2 convention, a route can be a flat-file or a flat-folder (which is basically the route name as the folder name, and index.tsx is the route file).

[jozefmery]

I believe there is still an issue in Remix v1.11.1 with the flat-folder folder convention and index routes.
Consider the following structure (essentially similar example as in the docs):
routes/_main/index.tsx -> layout without URL nesting
routes/_main._index/index.tsx -> index path with _main layout, e.g localhost/ should map to this
routes/_main.foo/index.tsx -> foo path with _main layout, e.g localhost/foo should map to this

If I understand everything correctly, this is how the convention should work, but running remix dev or remix routes yields an error, specifically: Error: Path undefined defined by route "_main._index/index" conflicts with route "_main/index"

Changing the structure to the following:
routes/_main/index.tsx
routes/_main.index/index.tsx
routes/_main.foo/index.tsx

fixes the error, and running remix routes yields:

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_main/index.tsx" />
    <Route path="foo" index file="routes/_main.foo/index.tsx" />
  </Route>
</Routes>

which seems incorrect (though I'm not sure), but the contents of routes/_main.index/index.tsx are not rendered in the Outlet of the _main layout. Route foo works as expected, edit: foo route renders contents of routes/_main.foo/index.tsx, without layout (I'm quite sure it worked for a moment, but I tried clearing caches, node_modules to make sure I have the correct version). Am I missing something ?

Edit 2: With the former file structure, placing the layout in routes/_main.tsx instead of routes/_main/index.tsx seems to resolve all the issues.

[sturgeonphillip]

Just did the 15 min tutorial with the indie stack and can confirm - had to change app/routes/_index.tsx to app/routes/index.tsx and then adjust the remix config v2_routeConvention to false.

[kiliman]

Yes, the transition to v2 routes will be messy, with so many tutorials still showing the old routing convention. Unfortunately, it's not backward compatible.

I have a migration script to go from v1 to v2 (flat routes). It's part of my remix-flat-routes package.

[trylaarsdam]

This needs to be highlighted in the blog tutorial, as it is currently broken. Either a quick fix of switching back to v1 routes or updating the tutorial to v2 routing.

Edit: looks like there is already an issue open in the examples repo: remix-run/examples#196

[machour]

Fixed by #5959