Remix Flat Routes – An Evolution in Routing
summary
Remix adds a separate npm package remix-flat-routes that replaces folder nesting with dot-separated filenames, resolves parent layouts by longest-prefix matching, and marks non-layout segments with a trailing underscore. Two conventions exist: flat files (single filenames) and flat folders (route folder + index/layout/page), enabling true co-location and relative imports. A migration CLI mpx migrate flat routes converts existing routes, and a server-only route file pattern keeps heavy libraries like Zod out of client bundles.
AI-written summary · about
chapters (7)
- 0:00Start
- 3:34Goals
- 5:47How to Install and Configure
- 6:38Filename Conventions
- 8:36Not a Parent Layout
- 9:58Route Filenames
- 10:16Co-locating Files
related talks
20mWhy File-based Routing Sucks and Why You Should Use It
55mUse the Platform With Framework Agnostic Routing
54mExploring the World of Remix: A Guide to Building Resilient and Performant Web Apps
14mRemix run - new kid on the block, and is it a competition for Next.js and Gatsby?
40mThe Remix Evolution: How React Router v7 Enables Fast and Resilient Apps
26mBuilding Better Websites with Remix
52mExploring the World of Remix: A Guide to Building Resilient and Performant Web Apps
45mRemix: the Truly Full-Stack Framework