kiliman / remix-flat-routes

Remix package to define routes using the flat-routes convention
MIT License
695 stars 24 forks source link

Inconsistent Routes generated for index #13

Closed nakleiderer closed 2 years ago

nakleiderer commented 2 years ago

When generating routes, flat-routes deviates from Remix's index routing. In Remix, routes/foo/index.tsx has a path of foo, but in flat-routes, it generates a path of foo/. This can cause form libraries to submit to incorrect routes and lead to other bugs in the app.

Input: One file at routes/foo._index.tsx

Expected:

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

Actual:

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

(note the extra "/" character in the Actual vs. Expected)

Repro: https://stackblitz.com/edit/node-bszx6t?file=README.md

Workaround: Renaming foo._index.tsx to foo.tsx generates the expected routes.

kiliman commented 2 years ago

With remix-flat-routes you have to explicitly define your index routes.

There's a difference between flat-files and flat-folders. With flat-files the route name is the filename without the extension. With flat-folders the route name is the folder name, and the index.tsx file is the route file. Either way, you must include index (or _index) in the route name to make it an index route.

flat-files

foo.tsx => /foo
foo.index.tsx => /foo/index

flat-folders

foo/index.tsx => /foo
foo.index/index.tsx => /foo/index