remix
remix copied to clipboard
V2 routing root index path issue
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" />
Can you check if 1.11.1 works for you? https://github.com/remix-run/remix/releases/tag/remix%401.11.1
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
@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
@kiliman ah, looks like I've misunderstood that then. Ignore me 😄
Thanks for the example!
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.
@ianhernandez it's for V2
@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).
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.
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.
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.
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: https://github.com/remix-run/examples/issues/196
Fixed by #5959