From bcbcf47fc3b48ce42c2569b7f6f9be9eea867feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 31 Aug 2023 04:49:11 +0200
Subject: [PATCH] chore: enable `v2_routeConvention` flag

---
 __template/app/routes/_index.tsx              |   7 +
 __template/remix.config.js                    |   5 +-
 _official-jokes/remix.config.js               |   2 +-
 _official-realtime-app/remix.config.js        |   5 +-
 bullmq-task-queue/README.md                   |   4 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 .../app/routes/{index.tsx => _index.tsx}      |   0
 .../{users/$userId.tsx => users.$userId.tsx}  |   0
 catch-boundary/remix.config.js                |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   6 +-
 chakra-ui/remix.config.js                     |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 client-only-components/remix.config.js        |   5 +-
 client-side-validation/app/root.tsx           | 167 +-----------------
 client-side-validation/app/routes/_index.tsx  | 167 ++++++++++++++++++
 client-side-validation/remix.config.js        |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 collected-notes/remix.config.js               |   5 +-
 combobox-resource-route/README.md             |   6 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 combobox-resource-route/remix.config.js       |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 .../set-theme.tsx => action.set-theme.tsx}    |   0
 dark-mode/remix.config.js                     |   5 +-
 dataloader/README.md                          |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 .../{users/index.tsx => users._index.tsx}     |   0
 dataloader/remix.config.js                    |   3 +
 docker-with-yarn-pnp/app/routes/_index.tsx    |   7 +
 docker-with-yarn-pnp/remix.config.js          |   5 +-
 emotion/README.md                             |   2 +-
 emotion/app/routes/{index.tsx => _index.tsx}  |   2 +-
 emotion/remix.config.js                       |   5 +-
 file-and-cloudinary-upload/remix.config.js    |   5 +-
 file-and-s3-upload/remix.config.js            |   9 +-
 firebase/app/routes/{index.tsx => _index.tsx} |   0
 firebase/remix.config.js                      |   5 +-
 form-to-notion-db/remix.config.js             |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 framer-motion/remix.config.js                 |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 framer-route-animation/remix.config.js        |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 gdpr-cookie-consent/remix.config.js           |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 google-analytics/remix.config.js              |   5 +-
 graphql-api/README.md                         |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   5 +-
 .../{api/character.tsx => api.character.tsx}  |   0
 .../characters.tsx => api.characters.tsx}     |   0
 .../{character/$id.tsx => character.$id.tsx}  |   0
 .../error.tsx => character.error.tsx}         |   0
 graphql-api/remix.config.js                   |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 .../resize/$.ts => assets.resize.$.ts}        |   0
 image-resize/remix.config.js                  |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 .../advanced.tsx => offset.advanced.tsx}      |   0
 .../{offset/simple.tsx => offset.simple.tsx}  |   0
 .../{page/advanced.tsx => page.advanced.tsx}  |   0
 .../alternative.tsx => page.alternative.tsx}  |   0
 .../{page/simple.tsx => page.simple.tsx}      |   0
 infinite-scrolling/remix.config.js            |   5 +-
 io-ts-formdata-decoding/README.md             |   2 +-
 io-ts-formdata-decoding/app/formData.ts       |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 io-ts-formdata-decoding/remix.config.js       |   5 +-
 ioredis/README.md                             |   2 +-
 ioredis/app/routes/{index.tsx => _index.tsx}  |   2 +-
 ioredis/remix.config.js                       |   5 +-
 leaflet/app/routes/{index.tsx => _index.tsx}  |   0
 leaflet/remix.config.js                       |   5 +-
 mantine/app/routes/{index.tsx => _index.tsx}  |   0
 mantine/remix.config.js                       |   5 +-
 msw/app/root.tsx                              |  19 +-
 msw/app/routes/_index.tsx                     |  24 +++
 msw/remix.config.js                           |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 multiple-forms/remix.config.js                |   5 +-
 multiple-params/README.md                     |  14 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 ...index.tsx => clients.$clientId._index.tsx} |   0
 ...clients.$clientId.invoices.$invoiceId.tsx} |   0
 ... => clients.$clientId.invoices._index.tsx} |   0
 ...ces.tsx => clients.$clientId.invoices.tsx} |   0
 .../$clientId.tsx => clients.$clientId.tsx}   |   0
 .../{clients/index.tsx => clients._index.tsx} |   0
 multiple-params/remix.config.js               |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 newsletter-signup/remix.config.js             |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 nprogress/remix.config.js                     |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 on-demand-hydration/remix.config.js           |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 .../{users/$userId.tsx => users.$userId.tsx}  |   0
 outlet-form-rerender/remix.config.js          |   5 +-
 pathless-routes/README.md                     |   4 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 .../hello.md => articles._layout.hello.md}    |   0
 .../__layout.tsx => articles._layout.tsx}     |   0
 pathless-routes/remix.config.js               |   5 +-
 picocss/app/routes/{index.tsx => _index.tsx}  |   2 +-
 picocss/remix.config.js                       |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 playwright/remix.config.js                    |   5 +-
 pm-app/app/routes/{index.tsx => _index.tsx}   |   0
 .../index.tsx => dashboard._index.tsx}        |   0
 ... dashboard.projects.$projectId.delete.tsx} |   0
 ...oard.projects.$projectId.list.$listId.tsx} |   0
 ....tsx => dashboard.projects.$projectId.tsx} |   0
 .../new.tsx => dashboard.projects.new.tsx}    |   0
 ...> dashboard.todo-lists.$listId._index.tsx} |   0
 ...> dashboard.todo-lists.$listId.delete.tsx} |   0
 ...ex.tsx => dashboard.todo-lists._index.tsx} |   0
 .../new.tsx => dashboard.todo-lists.new.tsx}  |   0
 ...tsx => dashboard.todos.$todoId._index.tsx} |   0
 ...tsx => dashboard.todos.$todoId.delete.tsx} |   0
 ...t.tsx => dashboard.todos.$todoId.edit.tsx} |   0
 ...et.tsx => dashboard.todos.$todoId.set.tsx} |   0
 .../index.tsx => dashboard.todos._index.tsx}  |   0
 .../todos/new.tsx => dashboard.todos.new.tsx} |   0
 .../toggle.tsx => dashboard.todos.toggle.tsx} |   0
 pm-app/remix.config.js                        |   5 +-
 quirrel/README.md                             |   2 +-
 quirrel/app/routes/{index.tsx => _index.tsx}  |   0
 .../greetings.ts => queues.greetings.ts}      |   0
 quirrel/remix.config.js                       |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 react-quill/remix.config.js                   |   5 +-
 react-spring/README.md                        |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 react-spring/remix.config.js                  |   5 +-
 redis-upstash-session/README.md               |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 redis-upstash-session/remix.config.js         |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 remix-auth-auth0/remix.config.js              |   5 +-
 remix-auth-form/remix.config.js               |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 remix-auth-github/remix.config.js             |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 remix-auth-supabase-github/remix.config.js    |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 remix-auth-supabase/remix.config.js           |   5 +-
 .../$id/edit.tsx => invoices.$id.edit.tsx}    |   0
 .../{invoices/add.tsx => invoices.add.tsx}    |   0
 route-modal/remix.config.js                   |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 ...$productId.tsx => products.$productId.tsx} |   0
 .../index.tsx => products._index.tsx}         |   0
 routes-gen/remix.config.js                    |   5 +-
 rust/app/routes/{index.tsx => _index.tsx}     |   0
 rust/remix.config.js                          |   5 +-
 sanity/app/routes/{index.tsx => _index.tsx}   |   0
 sanity/remix.config.js                        |   5 +-
 sass/app/routes/{index.tsx => _index.tsx}     |   2 +-
 sass/remix.config.js                          |   5 +-
 sass/styles/global.scss                       |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 search-input/remix.config.js                  |   5 +-
 session-flash/README.md                       |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 session-flash/remix.config.js                 |   5 +-
 sharing-loader-data/README.md                 |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 ...rkshopId.tsx => workshops.$workshopId.tsx} |   0
 .../index.tsx => workshops._index.tsx}        |   0
 sharing-loader-data/remix.config.js           |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 socket.io/remix.config.js                     |   4 +-
 sse-chat/app/routes/{index.tsx => _index.tsx} |   0
 sse-chat/remix.config.js                      |   5 +-
 sse-counter/remix.config.js                   |   5 +-
 stitches/README.md                            |   2 +-
 stitches/app/routes/{index.tsx => _index.tsx} |   2 +-
 .../app/routes/{jokes => }/jokes-error.tsx    |   0
 stitches/remix.config.js                      |   5 +-
 strapi/README.md                              |   2 +-
 strapi/app/routes/{index.tsx => _index.tsx}   |   5 +-
 strapi/remix.config.js                        |   5 +-
 stripe-integration/README.md                  |  21 ++-
 ...e-web-hook.tsx => api.stripe-web-hook.tsx} |   0
 .../cancelled.tsx => payment.cancelled.tsx}   |   0
 .../success.tsx => payment.success.tsx}       |   0
 stripe-integration/remix.config.js            |   5 +-
 .../{__boundary/$.tsx => _boundary.$.tsx}     |   0
 .../index.tsx => _boundary._index.tsx}        |   0
 .../error.tsx => _boundary.error.tsx}         |   0
 .../routes/{__boundary.tsx => _boundary.tsx}  |   0
 styled-components/components/src/Box.tsx      |   2 +-
 styled-components/remix.config.js             |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 styletron/remix.config.js                     |   7 +-
 supabase-subscription/remix.config.js         |   5 +-
 tailwindcss/remix.config.js                   |   2 +-
 theme-ui/README.md                            |   2 +-
 theme-ui/app/routes/{index.tsx => _index.tsx} |   0
 theme-ui/remix.config.js                      |   5 +-
 tiptap-collab-editing/remix.config.js         |   5 +-
 toast-message/README.md                       |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 toast-message/remix.config.js                 |   5 +-
 .../app/routes/{index.tsx => _index.tsx}      |   2 +-
 .../apps/remix-app/remix.config.js            |   3 +
 twind/README.md                               |   2 +-
 twind/app/routes/{index.tsx => _index.tsx}    |   0
 twind/remix.config.js                         |   9 +-
 unocss/app/routes/{index.tsx => _index.tsx}   |   0
 unocss/remix.config.js                        |   5 +-
 usematches-loader-data/README.md              |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 usematches-loader-data/remix.config.js        |   5 +-
 .../app/components/Text/Text.css.ts           |   2 +-
 .../app/routes/{index.tsx => _index.tsx}      |   0
 vanilla-extract/remix.config.js               |   5 +-
 xata/app/routes/{index.tsx => _index.tsx}     |   0
 xata/remix.config.js                          |   5 +-
 yarn-pnp/app/routes/{index.tsx => _index.tsx} |   2 +-
 yarn-pnp/remix.config.js                      |   9 +-
 220 files changed, 580 insertions(+), 343 deletions(-)
 create mode 100644 __template/app/routes/_index.tsx
 rename bullmq-task-queue/app/routes/{index.tsx => _index.tsx} (100%)
 rename catch-boundary/app/routes/{index.tsx => _index.tsx} (100%)
 rename catch-boundary/app/routes/{users/$userId.tsx => users.$userId.tsx} (100%)
 rename chakra-ui/app/routes/{index.tsx => _index.tsx} (74%)
 rename client-only-components/app/routes/{index.tsx => _index.tsx} (94%)
 create mode 100644 client-side-validation/app/routes/_index.tsx
 rename collected-notes/app/routes/{index.tsx => _index.tsx} (98%)
 rename combobox-resource-route/app/routes/{index.tsx => _index.tsx} (100%)
 rename dark-mode/app/routes/{index.tsx => _index.tsx} (94%)
 rename dark-mode/app/routes/{action/set-theme.tsx => action.set-theme.tsx} (100%)
 rename dataloader/app/routes/{index.tsx => _index.tsx} (100%)
 rename dataloader/app/routes/{users/index.tsx => users._index.tsx} (100%)
 create mode 100644 docker-with-yarn-pnp/app/routes/_index.tsx
 rename emotion/app/routes/{index.tsx => _index.tsx} (96%)
 rename firebase/app/routes/{index.tsx => _index.tsx} (100%)
 rename framer-motion/app/routes/{index.tsx => _index.tsx} (100%)
 rename framer-route-animation/app/routes/{index.tsx => _index.tsx} (100%)
 rename gdpr-cookie-consent/app/routes/{index.tsx => _index.tsx} (100%)
 rename google-analytics/app/routes/{index.tsx => _index.tsx} (100%)
 rename graphql-api/app/routes/{index.tsx => _index.tsx} (92%)
 rename graphql-api/app/routes/{api/character.tsx => api.character.tsx} (100%)
 rename graphql-api/app/routes/{api/characters.tsx => api.characters.tsx} (100%)
 rename graphql-api/app/routes/{character/$id.tsx => character.$id.tsx} (100%)
 rename graphql-api/app/routes/{character/error.tsx => character.error.tsx} (100%)
 rename image-resize/app/routes/{index.tsx => _index.tsx} (100%)
 rename image-resize/app/routes/{assets/resize/$.ts => assets.resize.$.ts} (100%)
 rename infinite-scrolling/app/routes/{index.tsx => _index.tsx} (96%)
 rename infinite-scrolling/app/routes/{offset/advanced.tsx => offset.advanced.tsx} (100%)
 rename infinite-scrolling/app/routes/{offset/simple.tsx => offset.simple.tsx} (100%)
 rename infinite-scrolling/app/routes/{page/advanced.tsx => page.advanced.tsx} (100%)
 rename infinite-scrolling/app/routes/{page/alternative.tsx => page.alternative.tsx} (100%)
 rename infinite-scrolling/app/routes/{page/simple.tsx => page.simple.tsx} (100%)
 rename io-ts-formdata-decoding/app/routes/{index.tsx => _index.tsx} (99%)
 rename ioredis/app/routes/{index.tsx => _index.tsx} (96%)
 rename leaflet/app/routes/{index.tsx => _index.tsx} (100%)
 rename mantine/app/routes/{index.tsx => _index.tsx} (100%)
 create mode 100644 msw/app/routes/_index.tsx
 rename multiple-forms/app/routes/{index.tsx => _index.tsx} (100%)
 rename multiple-params/app/routes/{index.tsx => _index.tsx} (67%)
 rename multiple-params/app/routes/{clients/$clientId/index.tsx => clients.$clientId._index.tsx} (100%)
 rename multiple-params/app/routes/{clients/$clientId/invoices/$invoiceId.tsx => clients.$clientId.invoices.$invoiceId.tsx} (100%)
 rename multiple-params/app/routes/{clients/$clientId/invoices/index.tsx => clients.$clientId.invoices._index.tsx} (100%)
 rename multiple-params/app/routes/{clients/$clientId/invoices.tsx => clients.$clientId.invoices.tsx} (100%)
 rename multiple-params/app/routes/{clients/$clientId.tsx => clients.$clientId.tsx} (100%)
 rename multiple-params/app/routes/{clients/index.tsx => clients._index.tsx} (100%)
 rename newsletter-signup/app/routes/{index.tsx => _index.tsx} (98%)
 rename nprogress/app/routes/{index.tsx => _index.tsx} (72%)
 rename on-demand-hydration/app/routes/{index.tsx => _index.tsx} (100%)
 rename outlet-form-rerender/app/routes/{index.tsx => _index.tsx} (100%)
 rename outlet-form-rerender/app/routes/{users/$userId.tsx => users.$userId.tsx} (100%)
 rename pathless-routes/app/routes/{index.tsx => _index.tsx} (79%)
 rename pathless-routes/app/routes/{articles/__layout/hello.md => articles._layout.hello.md} (100%)
 rename pathless-routes/app/routes/{articles/__layout.tsx => articles._layout.tsx} (100%)
 rename picocss/app/routes/{index.tsx => _index.tsx} (88%)
 rename playwright/app/routes/{index.tsx => _index.tsx} (100%)
 rename pm-app/app/routes/{index.tsx => _index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/index.tsx => dashboard._index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/projects/$projectId/delete.tsx => dashboard.projects.$projectId.delete.tsx} (100%)
 rename pm-app/app/routes/{dashboard/projects/$projectId/list/$listId.tsx => dashboard.projects.$projectId.list.$listId.tsx} (100%)
 rename pm-app/app/routes/{dashboard/projects/$projectId.tsx => dashboard.projects.$projectId.tsx} (100%)
 rename pm-app/app/routes/{dashboard/projects/new.tsx => dashboard.projects.new.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todo-lists/$listId/index.tsx => dashboard.todo-lists.$listId._index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todo-lists/$listId/delete.tsx => dashboard.todo-lists.$listId.delete.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todo-lists/index.tsx => dashboard.todo-lists._index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todo-lists/new.tsx => dashboard.todo-lists.new.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/$todoId/index.tsx => dashboard.todos.$todoId._index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/$todoId/delete.tsx => dashboard.todos.$todoId.delete.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/$todoId/edit.tsx => dashboard.todos.$todoId.edit.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/$todoId/set.tsx => dashboard.todos.$todoId.set.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/index.tsx => dashboard.todos._index.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/new.tsx => dashboard.todos.new.tsx} (100%)
 rename pm-app/app/routes/{dashboard/todos/toggle.tsx => dashboard.todos.toggle.tsx} (100%)
 rename quirrel/app/routes/{index.tsx => _index.tsx} (100%)
 rename quirrel/app/routes/{queues/greetings.ts => queues.greetings.ts} (100%)
 rename react-quill/app/routes/{index.tsx => _index.tsx} (100%)
 rename react-spring/app/routes/{index.tsx => _index.tsx} (95%)
 rename redis-upstash-session/app/routes/{index.tsx => _index.tsx} (95%)
 rename remix-auth-auth0/app/routes/{index.tsx => _index.tsx} (95%)
 rename remix-auth-github/app/routes/{index.tsx => _index.tsx} (95%)
 rename remix-auth-supabase-github/app/routes/{index.tsx => _index.tsx} (100%)
 rename remix-auth-supabase/app/routes/{index.tsx => _index.tsx} (100%)
 rename route-modal/app/routes/{invoices/$id/edit.tsx => invoices.$id.edit.tsx} (100%)
 rename route-modal/app/routes/{invoices/add.tsx => invoices.add.tsx} (100%)
 rename routes-gen/app/routes/{index.tsx => _index.tsx} (100%)
 rename routes-gen/app/routes/{products/$productId.tsx => products.$productId.tsx} (100%)
 rename routes-gen/app/routes/{products/index.tsx => products._index.tsx} (100%)
 rename rust/app/routes/{index.tsx => _index.tsx} (100%)
 rename sanity/app/routes/{index.tsx => _index.tsx} (100%)
 rename sass/app/routes/{index.tsx => _index.tsx} (50%)
 rename search-input/app/routes/{index.tsx => _index.tsx} (100%)
 rename session-flash/app/routes/{index.tsx => _index.tsx} (100%)
 rename sharing-loader-data/app/routes/{index.tsx => _index.tsx} (100%)
 rename sharing-loader-data/app/routes/{workshops/$workshopId.tsx => workshops.$workshopId.tsx} (100%)
 rename sharing-loader-data/app/routes/{workshops/index.tsx => workshops._index.tsx} (100%)
 rename socket.io/app/routes/{index.tsx => _index.tsx} (98%)
 rename sse-chat/app/routes/{index.tsx => _index.tsx} (100%)
 rename stitches/app/routes/{index.tsx => _index.tsx} (96%)
 rename stitches/app/routes/{jokes => }/jokes-error.tsx (100%)
 rename strapi/app/routes/{index.tsx => _index.tsx} (96%)
 rename stripe-integration/app/routes/{api/stripe-web-hook.tsx => api.stripe-web-hook.tsx} (100%)
 rename stripe-integration/app/routes/{payment/cancelled.tsx => payment.cancelled.tsx} (100%)
 rename stripe-integration/app/routes/{payment/success.tsx => payment.success.tsx} (100%)
 rename styled-components/app/routes/{__boundary/$.tsx => _boundary.$.tsx} (100%)
 rename styled-components/app/routes/{__boundary/index.tsx => _boundary._index.tsx} (100%)
 rename styled-components/app/routes/{__boundary/error.tsx => _boundary.error.tsx} (100%)
 rename styled-components/app/routes/{__boundary.tsx => _boundary.tsx} (100%)
 rename styletron/app/routes/{index.tsx => _index.tsx} (94%)
 rename theme-ui/app/routes/{index.tsx => _index.tsx} (100%)
 rename toast-message/app/routes/{index.tsx => _index.tsx} (100%)
 rename turborepo-vercel/apps/remix-app/app/routes/{index.tsx => _index.tsx} (94%)
 rename twind/app/routes/{index.tsx => _index.tsx} (100%)
 rename unocss/app/routes/{index.tsx => _index.tsx} (100%)
 rename usematches-loader-data/app/routes/{index.tsx => _index.tsx} (100%)
 rename vanilla-extract/app/routes/{index.tsx => _index.tsx} (100%)
 rename xata/app/routes/{index.tsx => _index.tsx} (100%)
 rename yarn-pnp/app/routes/{index.tsx => _index.tsx} (96%)

diff --git a/__template/app/routes/_index.tsx b/__template/app/routes/_index.tsx
new file mode 100644
index 00000000..58245323
--- /dev/null
+++ b/__template/app/routes/_index.tsx
@@ -0,0 +1,7 @@
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+    </div>
+  );
+}
diff --git a/__template/remix.config.js b/__template/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/__template/remix.config.js
+++ b/__template/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/_official-jokes/remix.config.js b/_official-jokes/remix.config.js
index 641fe6e4..6193e3fb 100644
--- a/_official-jokes/remix.config.js
+++ b/_official-jokes/remix.config.js
@@ -12,6 +12,6 @@ module.exports = {
   serverModuleFormat: "cjs",
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/_official-realtime-app/remix.config.js b/_official-realtime-app/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/_official-realtime-app/remix.config.js
+++ b/_official-realtime-app/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/bullmq-task-queue/README.md b/bullmq-task-queue/README.md
index 3686c432..e3653086 100644
--- a/bullmq-task-queue/README.md
+++ b/bullmq-task-queue/README.md
@@ -17,8 +17,8 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Relevant files:
 
-- [app/utils/notifier.server.ts](./app/queues/notifier.server.ts) where we define the necessary components for the background task queue, worker, and scheduler.
-- [app/routes/index.tsx](./app/routes/index.tsx) where background tasks are added to the queue.
+- [`app/utils/notifier.server.ts`](./app/queues/notifier.server.ts) where we define the necessary components for the background task queue, worker, and scheduler.
+- [`app/routes/_index.tsx`](./app/routes/_index.tsx) where background tasks are added to the queue.
 
 ## Related Links
 
diff --git a/bullmq-task-queue/app/routes/index.tsx b/bullmq-task-queue/app/routes/_index.tsx
similarity index 100%
rename from bullmq-task-queue/app/routes/index.tsx
rename to bullmq-task-queue/app/routes/_index.tsx
diff --git a/catch-boundary/app/routes/index.tsx b/catch-boundary/app/routes/_index.tsx
similarity index 100%
rename from catch-boundary/app/routes/index.tsx
rename to catch-boundary/app/routes/_index.tsx
diff --git a/catch-boundary/app/routes/users/$userId.tsx b/catch-boundary/app/routes/users.$userId.tsx
similarity index 100%
rename from catch-boundary/app/routes/users/$userId.tsx
rename to catch-boundary/app/routes/users.$userId.tsx
diff --git a/catch-boundary/remix.config.js b/catch-boundary/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/catch-boundary/remix.config.js
+++ b/catch-boundary/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/chakra-ui/app/routes/index.tsx b/chakra-ui/app/routes/_index.tsx
similarity index 74%
rename from chakra-ui/app/routes/index.tsx
rename to chakra-ui/app/routes/_index.tsx
index 11f02897..d6117692 100644
--- a/chakra-ui/app/routes/index.tsx
+++ b/chakra-ui/app/routes/_index.tsx
@@ -1,11 +1,9 @@
 import { Box } from "@chakra-ui/react";
 
-const Index = () => {
+export default function Index() {
   return (
     <Box bg="tomato" w="100%" p={4} color="white">
       Hello World!
     </Box>
   );
-};
-
-export default Index;
+}
diff --git a/chakra-ui/remix.config.js b/chakra-ui/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/chakra-ui/remix.config.js
+++ b/chakra-ui/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/client-only-components/app/routes/index.tsx b/client-only-components/app/routes/_index.tsx
similarity index 94%
rename from client-only-components/app/routes/index.tsx
rename to client-only-components/app/routes/_index.tsx
index e4066e60..ff11a4e8 100644
--- a/client-only-components/app/routes/index.tsx
+++ b/client-only-components/app/routes/_index.tsx
@@ -3,7 +3,7 @@ import { ClientOnly, useHydrated } from "remix-utils";
 import { BrokenOnTheServer } from "~/components/broken-on-the-server.client";
 import { ComplexComponent } from "~/components/complex-component";
 
-export default function Screen() {
+export default function Index() {
   const hydrated = useHydrated();
   return (
     <>
diff --git a/client-only-components/remix.config.js b/client-only-components/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/client-only-components/remix.config.js
+++ b/client-only-components/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/client-side-validation/app/root.tsx b/client-side-validation/app/root.tsx
index 8c91cf62..927a0f74 100644
--- a/client-side-validation/app/root.tsx
+++ b/client-side-validation/app/root.tsx
@@ -1,64 +1,20 @@
-import type { ActionArgs, LinksFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
   Meta,
+  Outlet,
   Scripts,
   ScrollRestoration,
-  useActionData,
-  useLoaderData,
 } from "@remix-run/react";
 
-import stylesUrl from "~/index.css";
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesUrl },
-];
-
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
   title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
 });
 
-export const action = async ({ request }: ActionArgs) => {
-  const form = await request.formData();
-  const message = `Successfully submitted data:
-      - Required text: ${form.get("required-text")}
-      - Required checkbox: ${form.get("required-checkbox")}
-      - Text with regex: ${form.get("text-with-regex")} 
-      - Number with min max: ${form.get("number-with-min-max")}
-      - Text with minlength maxlength: ${form.get(
-        "text-with-minlength-maxlength",
-      )}
-      - Date with min max: ${form.get("date-with-min-max")}
-  `;
-  return json({ message }, { status: 200 });
-};
-
-export const loader = async () => {
-  const date = new Date();
-
-  // today string in "YYYY-MM-DD" format
-  const todayString = `${date.getFullYear()}-${(
-    "00" +
-    (date.getMonth() + 1)
-  ).slice(-2)}-${("00" + date.getDate()).slice(-2)}`;
-
-  // tomorrow string in "YYYY-MM-DD" format
-  const tomorrowString = `${date.getFullYear()}-${(
-    "00" +
-    (date.getMonth() + 1)
-  ).slice(-2)}-${("00" + (date.getDate() + 1)).slice(-2)}`;
-
-  return json({ todayString, tomorrowString });
-};
-
 export default function App() {
-  const actionData = useActionData<typeof action>();
-  const data = useLoaderData<typeof loader>();
-
   return (
     <html lang="en">
       <head>
@@ -66,124 +22,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <div className="root">
-          <h1>Client-Side Validation Example</h1>
-          <form method="post">
-            <div className="form-control">
-              <label>
-                Required text
-                <abbr title="This field is mandatory" aria-label="required">
-                  *
-                </abbr>
-                <input type="text" name="required-text" required />
-              </label>
-            </div>
-            <div className="form-control">
-              <fieldset>
-                <legend>
-                  Required checkbox
-                  <abbr title="This field is mandatory" aria-label="required">
-                    *
-                  </abbr>
-                </legend>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="yes"
-                  />
-                  Yes
-                </label>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="maybe"
-                  />
-                  Maybe
-                </label>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="no"
-                  />
-                  No
-                </label>
-              </fieldset>
-            </div>
-            <div className="form-control">
-              <label>
-                Text with regex validation (only allow [Bb]anana or [Oo]range)
-                <input
-                  type="text"
-                  name="text-with-regex"
-                  list="list1"
-                  pattern="[Bb]anana|[Oo]range"
-                />
-                <datalist id="list1">
-                  <option>Banana</option>
-                  <option>Cherry</option>
-                  <option>Apple</option>
-                  <option>Strawberry</option>
-                  <option>Lemon</option>
-                  <option>Orange</option>
-                </datalist>
-              </label>
-            </div>
-            <div className="form-control">
-              <label>
-                Number with min (12) and max (120) validation
-                <input
-                  type="number"
-                  name="number-with-min-max"
-                  min="12"
-                  max="120"
-                  step="1"
-                />
-              </label>
-            </div>
-            <div className="form-control">
-              <label>
-                Email
-                <input name="email" type="email" />
-              </label>
-            </div>
-            <div className="form-control">
-              <label htmlFor="text-with-minlength-maxlength">
-                Text with minLength(10) and maxLength(140)
-              </label>
-              <textarea
-                name="text-with-minlength-maxlength"
-                id="text-with-minlength-maxlength"
-                minLength={10}
-                maxLength={140}
-                rows={3}
-              ></textarea>
-            </div>
-            <div className="form-control">
-              <label htmlFor="date-with-min-max">
-                Date with min(today) and max(tomorrow)
-              </label>
-              <input
-                type="date"
-                name="date-with-min-max"
-                id="date-with-min-max"
-                min={data.todayString}
-                max={data.tomorrowString}
-              />
-            </div>
-            <div className="form-control">
-              <button>Submit</button>
-            </div>
-          </form>
-          {actionData?.message ? (
-            <div className="result">{actionData.message}</div>
-          ) : null}
-        </div>
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
diff --git a/client-side-validation/app/routes/_index.tsx b/client-side-validation/app/routes/_index.tsx
new file mode 100644
index 00000000..bdb37ab0
--- /dev/null
+++ b/client-side-validation/app/routes/_index.tsx
@@ -0,0 +1,167 @@
+import type { ActionArgs, LinksFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { useActionData, useLoaderData } from "@remix-run/react";
+
+import stylesUrl from "~/index.css";
+export const action = async ({ request }: ActionArgs) => {
+  const form = await request.formData();
+  const message = `Successfully submitted data:
+      - Required text: ${form.get("required-text")}
+      - Required checkbox: ${form.get("required-checkbox")}
+      - Text with regex: ${form.get("text-with-regex")} 
+      - Number with min max: ${form.get("number-with-min-max")}
+      - Text with minlength maxlength: ${form.get(
+        "text-with-minlength-maxlength",
+      )}
+      - Date with min max: ${form.get("date-with-min-max")}
+  `;
+  return json({ message }, { status: 200 });
+};
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesUrl },
+];
+
+export const loader = async () => {
+  const date = new Date();
+
+  // today string in "YYYY-MM-DD" format
+  const todayString = `${date.getFullYear()}-${(
+    "00" +
+    (date.getMonth() + 1)
+  ).slice(-2)}-${("00" + date.getDate()).slice(-2)}`;
+
+  // tomorrow string in "YYYY-MM-DD" format
+  const tomorrowString = `${date.getFullYear()}-${(
+    "00" +
+    (date.getMonth() + 1)
+  ).slice(-2)}-${("00" + (date.getDate() + 1)).slice(-2)}`;
+
+  return json({ todayString, tomorrowString });
+};
+
+export default function Index() {
+  const actionData = useActionData<typeof action>();
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <div className="root">
+      <h1>Client-Side Validation Example</h1>
+      <form method="post">
+        <div className="form-control">
+          <label>
+            Required text
+            <abbr title="This field is mandatory" aria-label="required">
+              *
+            </abbr>
+            <input type="text" name="required-text" required />
+          </label>
+        </div>
+        <div className="form-control">
+          <fieldset>
+            <legend>
+              Required checkbox
+              <abbr title="This field is mandatory" aria-label="required">
+                *
+              </abbr>
+            </legend>
+            <label>
+              <input
+                type="radio"
+                required
+                name="required-checkbox"
+                value="yes"
+              />
+              Yes
+            </label>
+            <label>
+              <input
+                type="radio"
+                required
+                name="required-checkbox"
+                value="maybe"
+              />
+              Maybe
+            </label>
+            <label>
+              <input
+                type="radio"
+                required
+                name="required-checkbox"
+                value="no"
+              />
+              No
+            </label>
+          </fieldset>
+        </div>
+        <div className="form-control">
+          <label>
+            Text with regex validation (only allow [Bb]anana or [Oo]range)
+            <input
+              type="text"
+              name="text-with-regex"
+              list="list1"
+              pattern="[Bb]anana|[Oo]range"
+            />
+            <datalist id="list1">
+              <option>Banana</option>
+              <option>Cherry</option>
+              <option>Apple</option>
+              <option>Strawberry</option>
+              <option>Lemon</option>
+              <option>Orange</option>
+            </datalist>
+          </label>
+        </div>
+        <div className="form-control">
+          <label>
+            Number with min (12) and max (120) validation
+            <input
+              type="number"
+              name="number-with-min-max"
+              min="12"
+              max="120"
+              step="1"
+            />
+          </label>
+        </div>
+        <div className="form-control">
+          <label>
+            Email
+            <input name="email" type="email" />
+          </label>
+        </div>
+        <div className="form-control">
+          <label htmlFor="text-with-minlength-maxlength">
+            Text with minLength(10) and maxLength(140)
+          </label>
+          <textarea
+            name="text-with-minlength-maxlength"
+            id="text-with-minlength-maxlength"
+            minLength={10}
+            maxLength={140}
+            rows={3}
+          ></textarea>
+        </div>
+        <div className="form-control">
+          <label htmlFor="date-with-min-max">
+            Date with min(today) and max(tomorrow)
+          </label>
+          <input
+            type="date"
+            name="date-with-min-max"
+            id="date-with-min-max"
+            min={data.todayString}
+            max={data.tomorrowString}
+          />
+        </div>
+        <div className="form-control">
+          <button>Submit</button>
+        </div>
+      </form>
+      {actionData?.message ? (
+        <div className="result">{actionData.message}</div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/client-side-validation/remix.config.js b/client-side-validation/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/client-side-validation/remix.config.js
+++ b/client-side-validation/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/collected-notes/app/routes/index.tsx b/collected-notes/app/routes/_index.tsx
similarity index 98%
rename from collected-notes/app/routes/index.tsx
rename to collected-notes/app/routes/_index.tsx
index fdd593e1..2ae38f40 100644
--- a/collected-notes/app/routes/index.tsx
+++ b/collected-notes/app/routes/_index.tsx
@@ -21,7 +21,7 @@ export const loader = async ({ request }: LoaderArgs) => {
   return json({ notes, site });
 };
 
-export default function Screen() {
+export default function Index() {
   const { site, notes } = useLoaderData<typeof loader>();
   const [params] = useSearchParams();
   const term = params.get("term") || "";
diff --git a/collected-notes/remix.config.js b/collected-notes/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/collected-notes/remix.config.js
+++ b/collected-notes/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/combobox-resource-route/README.md b/combobox-resource-route/README.md
index 37d4c305..e89846ed 100644
--- a/combobox-resource-route/README.md
+++ b/combobox-resource-route/README.md
@@ -14,9 +14,9 @@ As the user types into the input field, a fetcher loads suggestions from the ser
 
 The relevant files are:
 
-- app/routes/index.tsx - The UI route with the combobox.
-- app/routes/lang-search.tsx - The Resource Route that searches languages.
-- app/models/langs.ts - The "model" that holds the languages data and knows how to search it.
+- [`app/routes/_index.tsx`](app/routes/_index.tsx) - The UI route with the combobox.
+- [`app/routes/lang-search.tsx`](app/routes/lang-search.tsx) - The Resource Route that searches languages.
+- [`app/models/langs.ts`](app/models/langs.ts) - The "model" that holds the languages data and knows how to search it.
 
 ## Related Links
 
diff --git a/combobox-resource-route/app/routes/index.tsx b/combobox-resource-route/app/routes/_index.tsx
similarity index 100%
rename from combobox-resource-route/app/routes/index.tsx
rename to combobox-resource-route/app/routes/_index.tsx
diff --git a/combobox-resource-route/remix.config.js b/combobox-resource-route/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/combobox-resource-route/remix.config.js
+++ b/combobox-resource-route/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/dark-mode/app/routes/index.tsx b/dark-mode/app/routes/_index.tsx
similarity index 94%
rename from dark-mode/app/routes/index.tsx
rename to dark-mode/app/routes/_index.tsx
index ea016096..ffc82232 100644
--- a/dark-mode/app/routes/index.tsx
+++ b/dark-mode/app/routes/_index.tsx
@@ -5,7 +5,7 @@ import { Theme, Themed, useTheme } from "~/utils/theme-provider";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
-export default function IndexRoute() {
+export default function Index() {
   const [, setTheme] = useTheme();
 
   const toggleTheme = () => {
diff --git a/dark-mode/app/routes/action/set-theme.tsx b/dark-mode/app/routes/action.set-theme.tsx
similarity index 100%
rename from dark-mode/app/routes/action/set-theme.tsx
rename to dark-mode/app/routes/action.set-theme.tsx
diff --git a/dark-mode/remix.config.js b/dark-mode/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/dark-mode/remix.config.js
+++ b/dark-mode/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/dataloader/README.md b/dataloader/README.md
index b0749fac..e5751b01 100644
--- a/dataloader/README.md
+++ b/dataloader/README.md
@@ -17,7 +17,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 `app/data.server.ts` implements the `db` object which mimics an ORM in the style of [Prisma](https://www.prisma.io/). The method `db.user#findMany` logs _user#findMany_ to the console, for demo purposes.
 
-There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
+There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/_index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
 
 ## Related Links
 
diff --git a/dataloader/app/routes/index.tsx b/dataloader/app/routes/_index.tsx
similarity index 100%
rename from dataloader/app/routes/index.tsx
rename to dataloader/app/routes/_index.tsx
diff --git a/dataloader/app/routes/users/index.tsx b/dataloader/app/routes/users._index.tsx
similarity index 100%
rename from dataloader/app/routes/users/index.tsx
rename to dataloader/app/routes/users._index.tsx
diff --git a/dataloader/remix.config.js b/dataloader/remix.config.js
index 6675ae23..76048d0c 100644
--- a/dataloader/remix.config.js
+++ b/dataloader/remix.config.js
@@ -1,5 +1,8 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   serverBuildDirectory: "server/build",
   // appDirectory: "app",
diff --git a/docker-with-yarn-pnp/app/routes/_index.tsx b/docker-with-yarn-pnp/app/routes/_index.tsx
new file mode 100644
index 00000000..58245323
--- /dev/null
+++ b/docker-with-yarn-pnp/app/routes/_index.tsx
@@ -0,0 +1,7 @@
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+    </div>
+  );
+}
diff --git a/docker-with-yarn-pnp/remix.config.js b/docker-with-yarn-pnp/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/docker-with-yarn-pnp/remix.config.js
+++ b/docker-with-yarn-pnp/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/emotion/README.md b/emotion/README.md
index 03b62332..804d6e36 100644
--- a/emotion/README.md
+++ b/emotion/README.md
@@ -43,7 +43,7 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/routes/_index.tsx`. The page auto-updates as you edit the file.
 
 ## Commands
 
diff --git a/emotion/app/routes/index.tsx b/emotion/app/routes/_index.tsx
similarity index 96%
rename from emotion/app/routes/index.tsx
rename to emotion/app/routes/_index.tsx
index 48a89055..a7262a40 100644
--- a/emotion/app/routes/index.tsx
+++ b/emotion/app/routes/_index.tsx
@@ -3,7 +3,7 @@ import { Link } from "@remix-run/react";
 
 const Container = styled("div")`
   font-family: "system-ui, sans-serif";
-  line-height: 1.4;
+  line-height: 1.8;
   background-color: #ddd;
 `;
 
diff --git a/emotion/remix.config.js b/emotion/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/emotion/remix.config.js
+++ b/emotion/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/file-and-cloudinary-upload/remix.config.js b/file-and-cloudinary-upload/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/file-and-cloudinary-upload/remix.config.js
+++ b/file-and-cloudinary-upload/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/file-and-s3-upload/remix.config.js b/file-and-s3-upload/remix.config.js
index 260b82c7..ca00ba94 100644
--- a/file-and-s3-upload/remix.config.js
+++ b/file-and-s3-upload/remix.config.js
@@ -1,10 +1,11 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
+/** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/firebase/app/routes/index.tsx b/firebase/app/routes/_index.tsx
similarity index 100%
rename from firebase/app/routes/index.tsx
rename to firebase/app/routes/_index.tsx
diff --git a/firebase/remix.config.js b/firebase/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/firebase/remix.config.js
+++ b/firebase/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/form-to-notion-db/remix.config.js b/form-to-notion-db/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/form-to-notion-db/remix.config.js
+++ b/form-to-notion-db/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/framer-motion/app/routes/index.tsx b/framer-motion/app/routes/_index.tsx
similarity index 100%
rename from framer-motion/app/routes/index.tsx
rename to framer-motion/app/routes/_index.tsx
diff --git a/framer-motion/remix.config.js b/framer-motion/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/framer-motion/remix.config.js
+++ b/framer-motion/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/framer-route-animation/app/routes/index.tsx b/framer-route-animation/app/routes/_index.tsx
similarity index 100%
rename from framer-route-animation/app/routes/index.tsx
rename to framer-route-animation/app/routes/_index.tsx
diff --git a/framer-route-animation/remix.config.js b/framer-route-animation/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/framer-route-animation/remix.config.js
+++ b/framer-route-animation/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/gdpr-cookie-consent/app/routes/index.tsx b/gdpr-cookie-consent/app/routes/_index.tsx
similarity index 100%
rename from gdpr-cookie-consent/app/routes/index.tsx
rename to gdpr-cookie-consent/app/routes/_index.tsx
diff --git a/gdpr-cookie-consent/remix.config.js b/gdpr-cookie-consent/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/gdpr-cookie-consent/remix.config.js
+++ b/gdpr-cookie-consent/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/google-analytics/app/routes/index.tsx b/google-analytics/app/routes/_index.tsx
similarity index 100%
rename from google-analytics/app/routes/index.tsx
rename to google-analytics/app/routes/_index.tsx
diff --git a/google-analytics/remix.config.js b/google-analytics/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/google-analytics/remix.config.js
+++ b/google-analytics/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/graphql-api/README.md b/graphql-api/README.md
index 97ff0849..e99a0c9e 100644
--- a/graphql-api/README.md
+++ b/graphql-api/README.md
@@ -25,7 +25,7 @@ This example makes use of [Remix Resource Routes][link-resource-routes] to fetch
 - [app/routes/api/characters.tsx](./app/routes/api/characters.tsx) & [app/routes/api/character.tsx](./app/routes/api/character.tsx)
   - These are the [Remix Resource Routes][link-resource-routes] that expose data via a JSON API
   - They fetch from the [GraphQL API][link-sample-api] using the [Fetch API][link-fetch]
-- [app/routes/index.tsx](./app/routes/index.tsx)
+- [app/routes/_index.tsx](./app/routes/_index.tsx)
   - This route fetches a list of characters
   - It's able to re-use the loader used by our API directly 🎉
 - [app/routes/character/\$id.tsx](./app/routes/character/$id.tsx)
diff --git a/graphql-api/app/routes/index.tsx b/graphql-api/app/routes/_index.tsx
similarity index 92%
rename from graphql-api/app/routes/index.tsx
rename to graphql-api/app/routes/_index.tsx
index 6e9fcb42..148d0ff5 100644
--- a/graphql-api/app/routes/index.tsx
+++ b/graphql-api/app/routes/_index.tsx
@@ -1,13 +1,14 @@
 import { Link, useLoaderData } from "@remix-run/react";
 
 import { Code } from "~/components/Code";
-import type { loader } from "~/routes/api/characters";
+
+import type { loader } from "./api.characters";
 
 /**
  * @description Here we simply re-export the loader used in our resource route
  * which allows this route to fetch from the GraphQL API directly
  */
-export { loader } from "~/routes/api/characters";
+export { loader } from "./api.characters";
 
 /**
  * @description This route demonstrates fetching a list of characters from
diff --git a/graphql-api/app/routes/api/character.tsx b/graphql-api/app/routes/api.character.tsx
similarity index 100%
rename from graphql-api/app/routes/api/character.tsx
rename to graphql-api/app/routes/api.character.tsx
diff --git a/graphql-api/app/routes/api/characters.tsx b/graphql-api/app/routes/api.characters.tsx
similarity index 100%
rename from graphql-api/app/routes/api/characters.tsx
rename to graphql-api/app/routes/api.characters.tsx
diff --git a/graphql-api/app/routes/character/$id.tsx b/graphql-api/app/routes/character.$id.tsx
similarity index 100%
rename from graphql-api/app/routes/character/$id.tsx
rename to graphql-api/app/routes/character.$id.tsx
diff --git a/graphql-api/app/routes/character/error.tsx b/graphql-api/app/routes/character.error.tsx
similarity index 100%
rename from graphql-api/app/routes/character/error.tsx
rename to graphql-api/app/routes/character.error.tsx
diff --git a/graphql-api/remix.config.js b/graphql-api/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/graphql-api/remix.config.js
+++ b/graphql-api/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/image-resize/app/routes/index.tsx b/image-resize/app/routes/_index.tsx
similarity index 100%
rename from image-resize/app/routes/index.tsx
rename to image-resize/app/routes/_index.tsx
diff --git a/image-resize/app/routes/assets/resize/$.ts b/image-resize/app/routes/assets.resize.$.ts
similarity index 100%
rename from image-resize/app/routes/assets/resize/$.ts
rename to image-resize/app/routes/assets.resize.$.ts
diff --git a/image-resize/remix.config.js b/image-resize/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/image-resize/remix.config.js
+++ b/image-resize/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/infinite-scrolling/app/routes/index.tsx b/infinite-scrolling/app/routes/_index.tsx
similarity index 96%
rename from infinite-scrolling/app/routes/index.tsx
rename to infinite-scrolling/app/routes/_index.tsx
index c9c20187..fa9f9ae7 100644
--- a/infinite-scrolling/app/routes/index.tsx
+++ b/infinite-scrolling/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 
-export default function IndexRoute() {
+export default function Index() {
   return (
     <main>
       <h1>Infinite Scroll Demo</h1>
diff --git a/infinite-scrolling/app/routes/offset/advanced.tsx b/infinite-scrolling/app/routes/offset.advanced.tsx
similarity index 100%
rename from infinite-scrolling/app/routes/offset/advanced.tsx
rename to infinite-scrolling/app/routes/offset.advanced.tsx
diff --git a/infinite-scrolling/app/routes/offset/simple.tsx b/infinite-scrolling/app/routes/offset.simple.tsx
similarity index 100%
rename from infinite-scrolling/app/routes/offset/simple.tsx
rename to infinite-scrolling/app/routes/offset.simple.tsx
diff --git a/infinite-scrolling/app/routes/page/advanced.tsx b/infinite-scrolling/app/routes/page.advanced.tsx
similarity index 100%
rename from infinite-scrolling/app/routes/page/advanced.tsx
rename to infinite-scrolling/app/routes/page.advanced.tsx
diff --git a/infinite-scrolling/app/routes/page/alternative.tsx b/infinite-scrolling/app/routes/page.alternative.tsx
similarity index 100%
rename from infinite-scrolling/app/routes/page/alternative.tsx
rename to infinite-scrolling/app/routes/page.alternative.tsx
diff --git a/infinite-scrolling/app/routes/page/simple.tsx b/infinite-scrolling/app/routes/page.simple.tsx
similarity index 100%
rename from infinite-scrolling/app/routes/page/simple.tsx
rename to infinite-scrolling/app/routes/page.simple.tsx
diff --git a/infinite-scrolling/remix.config.js b/infinite-scrolling/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/infinite-scrolling/remix.config.js
+++ b/infinite-scrolling/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/io-ts-formdata-decoding/README.md b/io-ts-formdata-decoding/README.md
index 7aa641e8..7d22808b 100644
--- a/io-ts-formdata-decoding/README.md
+++ b/io-ts-formdata-decoding/README.md
@@ -51,7 +51,7 @@ those assertions are not guaranteed to be safe:
 
 io-ts describes itself as a _"runtime type system for IO decoding/encoding"_. It can do what TypeScript by itself is not designed for: validate types at runtime. `app/formData.ts` implements a function `decodeFormData` that takes a `Request` and a [runtime representation of a type](https://gcanti.github.io/io-ts/modules/index.ts.html#type) and returns a correctly typed record with the form's data. In case the data is malformed, it will throw a [422 Uprocessable Entity](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422).
 
-The route `app/routes/index.tsx` implements an action that calls `decodeFormData`. It also implements a [CatchBoundary](https://remix.run/route/catch-boundary), which will render iff you provide anything other than a number to the `<input name="age" />`.
+The route `app/routes/_index.tsx` implements an action that calls `decodeFormData`. It also implements a [CatchBoundary](https://remix.run/route/catch-boundary), which will render iff you provide anything other than a number to the `<input name="age" />`.
 
 ## Related Links
 
diff --git a/io-ts-formdata-decoding/app/formData.ts b/io-ts-formdata-decoding/app/formData.ts
index 6c4beb0e..c584d3df 100644
--- a/io-ts-formdata-decoding/app/formData.ts
+++ b/io-ts-formdata-decoding/app/formData.ts
@@ -17,7 +17,7 @@ type Form = Record<string, any>;
 
 /**
  * Takes a `request` and a runtime representation of a type (see `const User` in
- * `/routes/index.tsx`) and returns the correctly typed form data if it equates
+ * `/routes/_index.tsx`) and returns the correctly typed form data if it equates
  * to the given runtime-type. Throws a 422 otherwise.
  */
 export const decodeFormData = async <DecodedForm extends Form>(
diff --git a/io-ts-formdata-decoding/app/routes/index.tsx b/io-ts-formdata-decoding/app/routes/_index.tsx
similarity index 99%
rename from io-ts-formdata-decoding/app/routes/index.tsx
rename to io-ts-formdata-decoding/app/routes/_index.tsx
index b9560ee1..0ab7bbb5 100644
--- a/io-ts-formdata-decoding/app/routes/index.tsx
+++ b/io-ts-formdata-decoding/app/routes/_index.tsx
@@ -74,7 +74,7 @@ const NewUserForm = () => (
   </section>
 );
 
-export default function App() {
+export default function Index() {
   const data = useActionData<typeof action>();
   const user = data?.user;
 
diff --git a/io-ts-formdata-decoding/remix.config.js b/io-ts-formdata-decoding/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/io-ts-formdata-decoding/remix.config.js
+++ b/io-ts-formdata-decoding/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/ioredis/README.md b/ioredis/README.md
index ea3fb69d..0f0f154d 100644
--- a/ioredis/README.md
+++ b/ioredis/README.md
@@ -18,7 +18,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 ## Relevant files:
 
 - [app/utils/redis.server.ts](./app/utils/redis.server.ts) where ioredis is setup.
-- [app/routes/index.tsx](./app/routes/index.tsx) where ioredis is used.
+- [app/routes/_index.tsx](./app/routes/_index.tsx) where ioredis is used.
 
 ## Related Links
 
diff --git a/ioredis/app/routes/index.tsx b/ioredis/app/routes/_index.tsx
similarity index 96%
rename from ioredis/app/routes/index.tsx
rename to ioredis/app/routes/_index.tsx
index 713a9a24..1b0e5f7f 100644
--- a/ioredis/app/routes/index.tsx
+++ b/ioredis/app/routes/_index.tsx
@@ -22,7 +22,7 @@ export const action = async ({ request }: ActionArgs) => {
   return redirect("/");
 };
 
-export default function IndexRoute() {
+export default function Index() {
   const data = useLoaderData<typeof loader>();
   const actionMessage = useActionData<typeof action>();
 
diff --git a/ioredis/remix.config.js b/ioredis/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/ioredis/remix.config.js
+++ b/ioredis/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/leaflet/app/routes/index.tsx b/leaflet/app/routes/_index.tsx
similarity index 100%
rename from leaflet/app/routes/index.tsx
rename to leaflet/app/routes/_index.tsx
diff --git a/leaflet/remix.config.js b/leaflet/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/leaflet/remix.config.js
+++ b/leaflet/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/mantine/app/routes/index.tsx b/mantine/app/routes/_index.tsx
similarity index 100%
rename from mantine/app/routes/index.tsx
rename to mantine/app/routes/_index.tsx
diff --git a/mantine/remix.config.js b/mantine/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/mantine/remix.config.js
+++ b/mantine/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/msw/app/root.tsx b/msw/app/root.tsx
index b49988a6..927a0f74 100644
--- a/msw/app/root.tsx
+++ b/msw/app/root.tsx
@@ -1,26 +1,13 @@
 import type { MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import {
   Links,
   LiveReload,
   Meta,
+  Outlet,
   Scripts,
   ScrollRestoration,
-  useLoaderData,
 } from "@remix-run/react";
 
-export const loader = async () => {
-  const data = await fetch("https://my-mock-api.com").then((response) =>
-    response.json(),
-  );
-
-  if (!data || typeof data.message !== "string") {
-    throw json({ message: "Server error" }, { status: 500 });
-  }
-
-  return json(data);
-};
-
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
   title: "New Remix App",
@@ -28,8 +15,6 @@ export const meta: MetaFunction = () => ({
 });
 
 export default function App() {
-  const data = useLoaderData<typeof loader>();
-
   return (
     <html lang="en">
       <head>
@@ -37,7 +22,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <h1>{data.message}</h1>
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
diff --git a/msw/app/routes/_index.tsx b/msw/app/routes/_index.tsx
new file mode 100644
index 00000000..6b5debb6
--- /dev/null
+++ b/msw/app/routes/_index.tsx
@@ -0,0 +1,24 @@
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+
+export const loader = async () => {
+  const data = await fetch("https://my-mock-api.com").then((response) =>
+    response.json(),
+  );
+
+  if (!data || typeof data.message !== "string") {
+    throw json({ message: "Server error" }, { status: 500 });
+  }
+
+  return json(data);
+};
+
+export default function Index() {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>{data.message}</h1>
+    </div>
+  );
+}
diff --git a/msw/remix.config.js b/msw/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/msw/remix.config.js
+++ b/msw/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/multiple-forms/app/routes/index.tsx b/multiple-forms/app/routes/_index.tsx
similarity index 100%
rename from multiple-forms/app/routes/index.tsx
rename to multiple-forms/app/routes/_index.tsx
diff --git a/multiple-forms/remix.config.js b/multiple-forms/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/multiple-forms/remix.config.js
+++ b/multiple-forms/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/multiple-params/README.md b/multiple-params/README.md
index 2fd586e0..10b010ab 100644
--- a/multiple-params/README.md
+++ b/multiple-params/README.md
@@ -30,19 +30,19 @@ Here's the output of `remix routes` for this project:
 <Routes>
   <Route file="root.tsx">
     <Route path="clients" file="routes/clients.tsx">
-      <Route path=":clientId" file="routes/clients/$clientId.tsx">
-        <Route path="invoices" file="routes/clients/$clientId/invoices.tsx">
+      <Route path=":clientId" file="routes/clients.$clientId.tsx">
+        <Route path="invoices" file="routes/clients.$clientId.invoices.tsx">
           <Route
             path=":invoiceId"
-            file="routes/clients/$clientId/invoices/$invoiceId.tsx"
+            file="routes/clients.$clientId.invoices.$invoiceId.tsx"
           />
-          <Route index file="routes/clients/$clientId/invoices/index.tsx" />
+          <Route index file="routes/clients.$clientId.invoices._index.tsx" />
         </Route>
-        <Route index file="routes/clients/$clientId/index.tsx" />
+        <Route index file="routes/clients.$clientId._index.tsx" />
       </Route>
-      <Route index file="routes/clients/index.tsx" />
+      <Route index file="routes/clients._index.tsx" />
     </Route>
-    <Route index file="routes/index.tsx" />
+    <Route index file="routes/_index.tsx" />
   </Route>
 </Routes>
 ```
diff --git a/multiple-params/app/routes/index.tsx b/multiple-params/app/routes/_index.tsx
similarity index 67%
rename from multiple-params/app/routes/index.tsx
rename to multiple-params/app/routes/_index.tsx
index fde0fdb5..2fcc7eeb 100644
--- a/multiple-params/app/routes/index.tsx
+++ b/multiple-params/app/routes/_index.tsx
@@ -1,4 +1,4 @@
-export default function IndexRoute() {
+export default function Index() {
   return (
     <div>
       <h1>Hello from the Index Route</h1>
diff --git a/multiple-params/app/routes/clients/$clientId/index.tsx b/multiple-params/app/routes/clients.$clientId._index.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/$clientId/index.tsx
rename to multiple-params/app/routes/clients.$clientId._index.tsx
diff --git a/multiple-params/app/routes/clients/$clientId/invoices/$invoiceId.tsx b/multiple-params/app/routes/clients.$clientId.invoices.$invoiceId.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/$clientId/invoices/$invoiceId.tsx
rename to multiple-params/app/routes/clients.$clientId.invoices.$invoiceId.tsx
diff --git a/multiple-params/app/routes/clients/$clientId/invoices/index.tsx b/multiple-params/app/routes/clients.$clientId.invoices._index.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/$clientId/invoices/index.tsx
rename to multiple-params/app/routes/clients.$clientId.invoices._index.tsx
diff --git a/multiple-params/app/routes/clients/$clientId/invoices.tsx b/multiple-params/app/routes/clients.$clientId.invoices.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/$clientId/invoices.tsx
rename to multiple-params/app/routes/clients.$clientId.invoices.tsx
diff --git a/multiple-params/app/routes/clients/$clientId.tsx b/multiple-params/app/routes/clients.$clientId.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/$clientId.tsx
rename to multiple-params/app/routes/clients.$clientId.tsx
diff --git a/multiple-params/app/routes/clients/index.tsx b/multiple-params/app/routes/clients._index.tsx
similarity index 100%
rename from multiple-params/app/routes/clients/index.tsx
rename to multiple-params/app/routes/clients._index.tsx
diff --git a/multiple-params/remix.config.js b/multiple-params/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/multiple-params/remix.config.js
+++ b/multiple-params/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/newsletter-signup/app/routes/index.tsx b/newsletter-signup/app/routes/_index.tsx
similarity index 98%
rename from newsletter-signup/app/routes/index.tsx
rename to newsletter-signup/app/routes/_index.tsx
index cbca6124..374f7a8d 100644
--- a/newsletter-signup/app/routes/index.tsx
+++ b/newsletter-signup/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>
       <ul>
         <li>
diff --git a/newsletter-signup/remix.config.js b/newsletter-signup/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/newsletter-signup/remix.config.js
+++ b/newsletter-signup/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/nprogress/app/routes/index.tsx b/nprogress/app/routes/_index.tsx
similarity index 72%
rename from nprogress/app/routes/index.tsx
rename to nprogress/app/routes/_index.tsx
index 09301e03..90b002bb 100644
--- a/nprogress/app/routes/index.tsx
+++ b/nprogress/app/routes/_index.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@remix-run/react";
 
-export default function Screen() {
+export default function Index() {
   return <Link to="/slow-page">Slow Page</Link>;
 }
diff --git a/nprogress/remix.config.js b/nprogress/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/nprogress/remix.config.js
+++ b/nprogress/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/on-demand-hydration/app/routes/index.tsx b/on-demand-hydration/app/routes/_index.tsx
similarity index 100%
rename from on-demand-hydration/app/routes/index.tsx
rename to on-demand-hydration/app/routes/_index.tsx
diff --git a/on-demand-hydration/remix.config.js b/on-demand-hydration/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/on-demand-hydration/remix.config.js
+++ b/on-demand-hydration/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/outlet-form-rerender/app/routes/index.tsx b/outlet-form-rerender/app/routes/_index.tsx
similarity index 100%
rename from outlet-form-rerender/app/routes/index.tsx
rename to outlet-form-rerender/app/routes/_index.tsx
diff --git a/outlet-form-rerender/app/routes/users/$userId.tsx b/outlet-form-rerender/app/routes/users.$userId.tsx
similarity index 100%
rename from outlet-form-rerender/app/routes/users/$userId.tsx
rename to outlet-form-rerender/app/routes/users.$userId.tsx
diff --git a/outlet-form-rerender/remix.config.js b/outlet-form-rerender/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/outlet-form-rerender/remix.config.js
+++ b/outlet-form-rerender/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/pathless-routes/README.md b/pathless-routes/README.md
index bab133cf..02f07336 100644
--- a/pathless-routes/README.md
+++ b/pathless-routes/README.md
@@ -12,7 +12,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 One of the features of React Router is the ability to have `pathless routes`. This gives the ability to add route layouts without adding segments to the URL.
 
-In this example, we are going to look at a common use case of building a blog with Remix built-in MDX compiler. We have a [index route](./app/routes/index.tsx) which serves as our Home page, and we have a [articles section](./app/routes/articles.tsx) which lists all the articles we have, and also serves as a layout for the articles section.
+In this example, we are going to look at a common use case of building a blog with Remix built-in MDX compiler. We have a [index route](./app/routes/_index.tsx) which serves as our Home page, and we have a [articles section](./app/routes/articles.tsx) which lists all the articles we have, and also serves as a layout for the articles section.
 
 Let's say we want to wrap each article with some styles. Due to the way MDX routes works in Remix, there is no way to include styles directly into the MDX file. We can instead create a pathless route and add our styles there.
 
@@ -34,7 +34,7 @@ app
 
 | URL             | Matched Route                           |
 | --------------- | --------------------------------------- |
-| /               | app/routes/index.tsx                    |
+| /               | app/routes/_index.tsx                    |
 | /articles       | app/routes/articles.tsx                 |
 | /articles/hello | app/routes/articles/\_\_layout/hello.md |
 
diff --git a/pathless-routes/app/routes/index.tsx b/pathless-routes/app/routes/_index.tsx
similarity index 79%
rename from pathless-routes/app/routes/index.tsx
rename to pathless-routes/app/routes/_index.tsx
index f90618a0..061a9174 100644
--- a/pathless-routes/app/routes/index.tsx
+++ b/pathless-routes/app/routes/_index.tsx
@@ -4,6 +4,6 @@ export const meta: MetaFunction = () => {
   return { title: "Home" };
 };
 
-export default function IndexRoute() {
+export default function Index() {
   return <h2>Home</h2>;
 }
diff --git a/pathless-routes/app/routes/articles/__layout/hello.md b/pathless-routes/app/routes/articles._layout.hello.md
similarity index 100%
rename from pathless-routes/app/routes/articles/__layout/hello.md
rename to pathless-routes/app/routes/articles._layout.hello.md
diff --git a/pathless-routes/app/routes/articles/__layout.tsx b/pathless-routes/app/routes/articles._layout.tsx
similarity index 100%
rename from pathless-routes/app/routes/articles/__layout.tsx
rename to pathless-routes/app/routes/articles._layout.tsx
diff --git a/pathless-routes/remix.config.js b/pathless-routes/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/pathless-routes/remix.config.js
+++ b/pathless-routes/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/picocss/app/routes/index.tsx b/picocss/app/routes/_index.tsx
similarity index 88%
rename from picocss/app/routes/index.tsx
rename to picocss/app/routes/_index.tsx
index 5ef4ff51..a415c23b 100644
--- a/picocss/app/routes/index.tsx
+++ b/picocss/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 
-export default function Home() {
+export default function Index() {
   return (
     <article>
       <header>Remix + PicoCSS template </header>
diff --git a/picocss/remix.config.js b/picocss/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/picocss/remix.config.js
+++ b/picocss/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/playwright/app/routes/index.tsx b/playwright/app/routes/_index.tsx
similarity index 100%
rename from playwright/app/routes/index.tsx
rename to playwright/app/routes/_index.tsx
diff --git a/playwright/remix.config.js b/playwright/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/playwright/remix.config.js
+++ b/playwright/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/pm-app/app/routes/index.tsx b/pm-app/app/routes/_index.tsx
similarity index 100%
rename from pm-app/app/routes/index.tsx
rename to pm-app/app/routes/_index.tsx
diff --git a/pm-app/app/routes/dashboard/index.tsx b/pm-app/app/routes/dashboard._index.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/index.tsx
rename to pm-app/app/routes/dashboard._index.tsx
diff --git a/pm-app/app/routes/dashboard/projects/$projectId/delete.tsx b/pm-app/app/routes/dashboard.projects.$projectId.delete.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/projects/$projectId/delete.tsx
rename to pm-app/app/routes/dashboard.projects.$projectId.delete.tsx
diff --git a/pm-app/app/routes/dashboard/projects/$projectId/list/$listId.tsx b/pm-app/app/routes/dashboard.projects.$projectId.list.$listId.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/projects/$projectId/list/$listId.tsx
rename to pm-app/app/routes/dashboard.projects.$projectId.list.$listId.tsx
diff --git a/pm-app/app/routes/dashboard/projects/$projectId.tsx b/pm-app/app/routes/dashboard.projects.$projectId.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/projects/$projectId.tsx
rename to pm-app/app/routes/dashboard.projects.$projectId.tsx
diff --git a/pm-app/app/routes/dashboard/projects/new.tsx b/pm-app/app/routes/dashboard.projects.new.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/projects/new.tsx
rename to pm-app/app/routes/dashboard.projects.new.tsx
diff --git a/pm-app/app/routes/dashboard/todo-lists/$listId/index.tsx b/pm-app/app/routes/dashboard.todo-lists.$listId._index.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todo-lists/$listId/index.tsx
rename to pm-app/app/routes/dashboard.todo-lists.$listId._index.tsx
diff --git a/pm-app/app/routes/dashboard/todo-lists/$listId/delete.tsx b/pm-app/app/routes/dashboard.todo-lists.$listId.delete.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todo-lists/$listId/delete.tsx
rename to pm-app/app/routes/dashboard.todo-lists.$listId.delete.tsx
diff --git a/pm-app/app/routes/dashboard/todo-lists/index.tsx b/pm-app/app/routes/dashboard.todo-lists._index.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todo-lists/index.tsx
rename to pm-app/app/routes/dashboard.todo-lists._index.tsx
diff --git a/pm-app/app/routes/dashboard/todo-lists/new.tsx b/pm-app/app/routes/dashboard.todo-lists.new.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todo-lists/new.tsx
rename to pm-app/app/routes/dashboard.todo-lists.new.tsx
diff --git a/pm-app/app/routes/dashboard/todos/$todoId/index.tsx b/pm-app/app/routes/dashboard.todos.$todoId._index.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/$todoId/index.tsx
rename to pm-app/app/routes/dashboard.todos.$todoId._index.tsx
diff --git a/pm-app/app/routes/dashboard/todos/$todoId/delete.tsx b/pm-app/app/routes/dashboard.todos.$todoId.delete.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/$todoId/delete.tsx
rename to pm-app/app/routes/dashboard.todos.$todoId.delete.tsx
diff --git a/pm-app/app/routes/dashboard/todos/$todoId/edit.tsx b/pm-app/app/routes/dashboard.todos.$todoId.edit.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/$todoId/edit.tsx
rename to pm-app/app/routes/dashboard.todos.$todoId.edit.tsx
diff --git a/pm-app/app/routes/dashboard/todos/$todoId/set.tsx b/pm-app/app/routes/dashboard.todos.$todoId.set.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/$todoId/set.tsx
rename to pm-app/app/routes/dashboard.todos.$todoId.set.tsx
diff --git a/pm-app/app/routes/dashboard/todos/index.tsx b/pm-app/app/routes/dashboard.todos._index.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/index.tsx
rename to pm-app/app/routes/dashboard.todos._index.tsx
diff --git a/pm-app/app/routes/dashboard/todos/new.tsx b/pm-app/app/routes/dashboard.todos.new.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/new.tsx
rename to pm-app/app/routes/dashboard.todos.new.tsx
diff --git a/pm-app/app/routes/dashboard/todos/toggle.tsx b/pm-app/app/routes/dashboard.todos.toggle.tsx
similarity index 100%
rename from pm-app/app/routes/dashboard/todos/toggle.tsx
rename to pm-app/app/routes/dashboard.todos.toggle.tsx
diff --git a/pm-app/remix.config.js b/pm-app/remix.config.js
index b089e89d..cd0b0440 100644
--- a/pm-app/remix.config.js
+++ b/pm-app/remix.config.js
@@ -1,10 +1,13 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
 
 module.exports = {
diff --git a/quirrel/README.md b/quirrel/README.md
index 602ce620..8100be63 100644
--- a/quirrel/README.md
+++ b/quirrel/README.md
@@ -16,7 +16,7 @@ Relevant files:
 
 - [app/queues/greetings.server.ts](app/queues/greetings.server.ts)
 - [app/routes/queues/greetings.ts](app/routes/queues/greetings.ts)
-- [app/routes/index.tsx](app/routes/index.tsx)
+- [app/routes/_index.tsx](app/routes/_index.tsx)
 
 Describe the example and how it demonstrates solving the problem. Reference any relevant files/dependencies if needed.
 
diff --git a/quirrel/app/routes/index.tsx b/quirrel/app/routes/_index.tsx
similarity index 100%
rename from quirrel/app/routes/index.tsx
rename to quirrel/app/routes/_index.tsx
diff --git a/quirrel/app/routes/queues/greetings.ts b/quirrel/app/routes/queues.greetings.ts
similarity index 100%
rename from quirrel/app/routes/queues/greetings.ts
rename to quirrel/app/routes/queues.greetings.ts
diff --git a/quirrel/remix.config.js b/quirrel/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/quirrel/remix.config.js
+++ b/quirrel/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/react-quill/app/routes/index.tsx b/react-quill/app/routes/_index.tsx
similarity index 100%
rename from react-quill/app/routes/index.tsx
rename to react-quill/app/routes/_index.tsx
diff --git a/react-quill/remix.config.js b/react-quill/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/react-quill/remix.config.js
+++ b/react-quill/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/react-spring/README.md b/react-spring/README.md
index fe462e84..42da7ad3 100644
--- a/react-spring/README.md
+++ b/react-spring/README.md
@@ -17,7 +17,7 @@ And when JavaScript is disabled, `unset` the animation styles so that the page i
 Relevant files:
 
 - [app/root.tsx](./app/root.tsx)
-- [app/routes/index.tsx](./app/routes/index.tsx)
+- [app/routes/_index.tsx](./app/routes/_index.tsx)
 
 ## Related Links
 
diff --git a/react-spring/app/routes/index.tsx b/react-spring/app/routes/_index.tsx
similarity index 95%
rename from react-spring/app/routes/index.tsx
rename to react-spring/app/routes/_index.tsx
index 0020c22f..1a2f232d 100644
--- a/react-spring/app/routes/index.tsx
+++ b/react-spring/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 import { useSpring, animated, config } from "react-spring";
 
-export default function IndexRoute() {
+export default function Index() {
   const [{ x }, interpolate] = useSpring(() => ({
     from: { x: 0 },
     config: config.wobbly,
diff --git a/react-spring/remix.config.js b/react-spring/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/react-spring/remix.config.js
+++ b/react-spring/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/redis-upstash-session/README.md b/redis-upstash-session/README.md
index 404ca93d..3df5cefa 100644
--- a/redis-upstash-session/README.md
+++ b/redis-upstash-session/README.md
@@ -29,7 +29,7 @@ Sorry no preview as you'll need an account on Upstash for it
 
 For more info check the following files:
 
-- [app/routes/index.tsx](app/routes/index.tsx)
+- [app/routes/_index.tsx](app/routes/_index.tsx)
 - [app/sessions.server.ts](app/sessions.server.ts)
 - [app/sessions/upstash.server.ts](app/sessions/upstash.server.ts)
 
diff --git a/redis-upstash-session/app/routes/index.tsx b/redis-upstash-session/app/routes/_index.tsx
similarity index 95%
rename from redis-upstash-session/app/routes/index.tsx
rename to redis-upstash-session/app/routes/_index.tsx
index c1db3371..0dc86d04 100644
--- a/redis-upstash-session/app/routes/index.tsx
+++ b/redis-upstash-session/app/routes/_index.tsx
@@ -22,7 +22,7 @@ export const loader = async ({ request }: LoaderArgs) => {
   });
 };
 
-export default function IndexRoute() {
+export default function Index() {
   const data = useLoaderData<typeof loader>();
   return <div>{data.message}</div>;
 }
diff --git a/redis-upstash-session/remix.config.js b/redis-upstash-session/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/redis-upstash-session/remix.config.js
+++ b/redis-upstash-session/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/remix-auth-auth0/app/routes/index.tsx b/remix-auth-auth0/app/routes/_index.tsx
similarity index 95%
rename from remix-auth-auth0/app/routes/index.tsx
rename to remix-auth-auth0/app/routes/_index.tsx
index 0ef2a31f..81ab50e6 100644
--- a/remix-auth-auth0/app/routes/index.tsx
+++ b/remix-auth-auth0/app/routes/_index.tsx
@@ -12,7 +12,7 @@ export const loader = async ({ request }: LoaderArgs) => {
   return json({ error });
 };
 
-export default function Screen() {
+export default function Index() {
   const { error } = useLoaderData<typeof loader>();
 
   return (
diff --git a/remix-auth-auth0/remix.config.js b/remix-auth-auth0/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/remix-auth-auth0/remix.config.js
+++ b/remix-auth-auth0/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/remix-auth-form/remix.config.js b/remix-auth-form/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/remix-auth-form/remix.config.js
+++ b/remix-auth-form/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/remix-auth-github/app/routes/index.tsx b/remix-auth-github/app/routes/_index.tsx
similarity index 95%
rename from remix-auth-github/app/routes/index.tsx
rename to remix-auth-github/app/routes/_index.tsx
index 7474e253..77f62ba2 100644
--- a/remix-auth-github/app/routes/index.tsx
+++ b/remix-auth-github/app/routes/_index.tsx
@@ -14,7 +14,7 @@ export const loader = async ({ request }: LoaderArgs) => {
   return json({ error });
 };
 
-export default function Screen() {
+export default function Index() {
   const { error } = useLoaderData<typeof loader>();
 
   return (
diff --git a/remix-auth-github/remix.config.js b/remix-auth-github/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/remix-auth-github/remix.config.js
+++ b/remix-auth-github/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/remix-auth-supabase-github/app/routes/index.tsx b/remix-auth-supabase-github/app/routes/_index.tsx
similarity index 100%
rename from remix-auth-supabase-github/app/routes/index.tsx
rename to remix-auth-supabase-github/app/routes/_index.tsx
diff --git a/remix-auth-supabase-github/remix.config.js b/remix-auth-supabase-github/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/remix-auth-supabase-github/remix.config.js
+++ b/remix-auth-supabase-github/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/remix-auth-supabase/app/routes/index.tsx b/remix-auth-supabase/app/routes/_index.tsx
similarity index 100%
rename from remix-auth-supabase/app/routes/index.tsx
rename to remix-auth-supabase/app/routes/_index.tsx
diff --git a/remix-auth-supabase/remix.config.js b/remix-auth-supabase/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/remix-auth-supabase/remix.config.js
+++ b/remix-auth-supabase/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/route-modal/app/routes/invoices/$id/edit.tsx b/route-modal/app/routes/invoices.$id.edit.tsx
similarity index 100%
rename from route-modal/app/routes/invoices/$id/edit.tsx
rename to route-modal/app/routes/invoices.$id.edit.tsx
diff --git a/route-modal/app/routes/invoices/add.tsx b/route-modal/app/routes/invoices.add.tsx
similarity index 100%
rename from route-modal/app/routes/invoices/add.tsx
rename to route-modal/app/routes/invoices.add.tsx
diff --git a/route-modal/remix.config.js b/route-modal/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/route-modal/remix.config.js
+++ b/route-modal/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/routes-gen/app/routes/index.tsx b/routes-gen/app/routes/_index.tsx
similarity index 100%
rename from routes-gen/app/routes/index.tsx
rename to routes-gen/app/routes/_index.tsx
diff --git a/routes-gen/app/routes/products/$productId.tsx b/routes-gen/app/routes/products.$productId.tsx
similarity index 100%
rename from routes-gen/app/routes/products/$productId.tsx
rename to routes-gen/app/routes/products.$productId.tsx
diff --git a/routes-gen/app/routes/products/index.tsx b/routes-gen/app/routes/products._index.tsx
similarity index 100%
rename from routes-gen/app/routes/products/index.tsx
rename to routes-gen/app/routes/products._index.tsx
diff --git a/routes-gen/remix.config.js b/routes-gen/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/routes-gen/remix.config.js
+++ b/routes-gen/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/rust/app/routes/index.tsx b/rust/app/routes/_index.tsx
similarity index 100%
rename from rust/app/routes/index.tsx
rename to rust/app/routes/_index.tsx
diff --git a/rust/remix.config.js b/rust/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/rust/remix.config.js
+++ b/rust/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/sanity/app/routes/index.tsx b/sanity/app/routes/_index.tsx
similarity index 100%
rename from sanity/app/routes/index.tsx
rename to sanity/app/routes/_index.tsx
diff --git a/sanity/remix.config.js b/sanity/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/sanity/remix.config.js
+++ b/sanity/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/sass/app/routes/index.tsx b/sass/app/routes/_index.tsx
similarity index 50%
rename from sass/app/routes/index.tsx
rename to sass/app/routes/_index.tsx
index 97195eb7..e6e3cf12 100644
--- a/sass/app/routes/index.tsx
+++ b/sass/app/routes/_index.tsx
@@ -1,3 +1,3 @@
 export default function Index() {
-  return <div>Hello World!</div>;
+  return <h1>Welcome to Remix</h1>;
 }
diff --git a/sass/remix.config.js b/sass/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/sass/remix.config.js
+++ b/sass/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/sass/styles/global.scss b/sass/styles/global.scss
index 927a5c41..958e0d0e 100644
--- a/sass/styles/global.scss
+++ b/sass/styles/global.scss
@@ -1,6 +1,6 @@
 $font-stack: system-ui, sans-serif;
 $primary-color: #333;
-$line-height: 1.4;
+$line-height: 1.8;
 
 :root {
   color: $primary-color;
diff --git a/search-input/app/routes/index.tsx b/search-input/app/routes/_index.tsx
similarity index 100%
rename from search-input/app/routes/index.tsx
rename to search-input/app/routes/_index.tsx
diff --git a/search-input/remix.config.js b/search-input/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/search-input/remix.config.js
+++ b/search-input/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/session-flash/README.md b/session-flash/README.md
index fad38908..be28a511 100644
--- a/session-flash/README.md
+++ b/session-flash/README.md
@@ -10,7 +10,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Example
 
-This example shows how to create a simple alert message. Check [app/routes/index.tsx](app/routes/index.tsx) to see the flash message in action:
+This example shows how to create a simple alert message. Check [app/routes/_index.tsx](app/routes/_index.tsx) to see the flash message in action:
 
 Implementation logic:
 
diff --git a/session-flash/app/routes/index.tsx b/session-flash/app/routes/_index.tsx
similarity index 100%
rename from session-flash/app/routes/index.tsx
rename to session-flash/app/routes/_index.tsx
diff --git a/session-flash/remix.config.js b/session-flash/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/session-flash/remix.config.js
+++ b/session-flash/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/sharing-loader-data/README.md b/sharing-loader-data/README.md
index f1fe26e4..0a75f6c6 100644
--- a/sharing-loader-data/README.md
+++ b/sharing-loader-data/README.md
@@ -13,7 +13,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 This is a simple "workshop" app which has a "user" and a list of workshops. The user is loaded in the root loader and needed in the index route. The workshops are loaded in the workshops loader and then used in the individual workshop routes.
 
 - [app/root.tsx](./app/root.tsx) - This loads the user
-- [app/routes/index.tsx](./app/routes/index.tsx) - This accesses the root loader data to display the user's name
+- [app/routes/_index.tsx](./app/routes/_index.tsx) - This accesses the root loader data to display the user's name
 - [app/routes/workshops.tsx](./app/routes/workshops.tsx) - This loads the workshops to display them in a list of links
 - [app/routes/workshops/$workshopId.tsx](./app/routes/workshops/$workshopId.tsx) - This accesses the workshops loader data to display the workshop details
 
diff --git a/sharing-loader-data/app/routes/index.tsx b/sharing-loader-data/app/routes/_index.tsx
similarity index 100%
rename from sharing-loader-data/app/routes/index.tsx
rename to sharing-loader-data/app/routes/_index.tsx
diff --git a/sharing-loader-data/app/routes/workshops/$workshopId.tsx b/sharing-loader-data/app/routes/workshops.$workshopId.tsx
similarity index 100%
rename from sharing-loader-data/app/routes/workshops/$workshopId.tsx
rename to sharing-loader-data/app/routes/workshops.$workshopId.tsx
diff --git a/sharing-loader-data/app/routes/workshops/index.tsx b/sharing-loader-data/app/routes/workshops._index.tsx
similarity index 100%
rename from sharing-loader-data/app/routes/workshops/index.tsx
rename to sharing-loader-data/app/routes/workshops._index.tsx
diff --git a/sharing-loader-data/remix.config.js b/sharing-loader-data/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/sharing-loader-data/remix.config.js
+++ b/sharing-loader-data/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/socket.io/app/routes/index.tsx b/socket.io/app/routes/_index.tsx
similarity index 98%
rename from socket.io/app/routes/index.tsx
rename to socket.io/app/routes/_index.tsx
index 346e1036..8d79b2d1 100644
--- a/socket.io/app/routes/index.tsx
+++ b/socket.io/app/routes/_index.tsx
@@ -16,7 +16,7 @@ export default function Index() {
   }, [socket]);
 
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix + Socket.io</h1>
       <div>
         <button type="button" onClick={() => socket?.emit("event", "ping")}>
diff --git a/socket.io/remix.config.js b/socket.io/remix.config.js
index fd9331ed..76048d0c 100644
--- a/socket.io/remix.config.js
+++ b/socket.io/remix.config.js
@@ -1,9 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   serverBuildDirectory: "server/build",
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
 };
diff --git a/sse-chat/app/routes/index.tsx b/sse-chat/app/routes/_index.tsx
similarity index 100%
rename from sse-chat/app/routes/index.tsx
rename to sse-chat/app/routes/_index.tsx
diff --git a/sse-chat/remix.config.js b/sse-chat/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/sse-chat/remix.config.js
+++ b/sse-chat/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/sse-counter/remix.config.js b/sse-counter/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/sse-counter/remix.config.js
+++ b/sse-counter/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/stitches/README.md b/stitches/README.md
index 716b2d9f..68f7541d 100644
--- a/stitches/README.md
+++ b/stitches/README.md
@@ -41,7 +41,7 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/routes/_index.tsx`. The page auto-updates as you edit the file.
 
 ## Commands
 
diff --git a/stitches/app/routes/index.tsx b/stitches/app/routes/_index.tsx
similarity index 96%
rename from stitches/app/routes/index.tsx
rename to stitches/app/routes/_index.tsx
index 4d8b7478..cf0a6304 100644
--- a/stitches/app/routes/index.tsx
+++ b/stitches/app/routes/_index.tsx
@@ -4,7 +4,7 @@ import { styled } from "~/styles/stitches.config";
 
 const Container = styled("div", {
   fontFamily: "system-ui, sans-serif",
-  lineHeight: 1.4,
+  lineHeight: 1.8,
   backgroundColor: "#999",
 });
 
diff --git a/stitches/app/routes/jokes/jokes-error.tsx b/stitches/app/routes/jokes-error.tsx
similarity index 100%
rename from stitches/app/routes/jokes/jokes-error.tsx
rename to stitches/app/routes/jokes-error.tsx
diff --git a/stitches/remix.config.js b/stitches/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/stitches/remix.config.js
+++ b/stitches/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/strapi/README.md b/strapi/README.md
index 2a1063e6..5092c091 100755
--- a/strapi/README.md
+++ b/strapi/README.md
@@ -44,6 +44,6 @@ You'll find one pre-written article in the [content manager](https://docs.strapi
 
 The Remix app is at http://localhost:3000.
 
-It has exactly one route `app/routes/index.tsx` which utilises a loader function to fetch all `Posts` [from an external API (Remix docs)](https://remix.run/guides/data-loading#external-apis), which in this case is Strapi's API.
+It has exactly one route `app/routes/_index.tsx` which utilises a loader function to fetch all `Posts` [from an external API (Remix docs)](https://remix.run/guides/data-loading#external-apis), which in this case is Strapi's API.
 
 Remix will then continue to render all the posts. To show a somewhat real-world example, the loader parses the `Article (Rich text)` (aka Markdown) into HTML with the help of [marked](https://github.com/markedjs/marked).
diff --git a/strapi/app/routes/index.tsx b/strapi/app/routes/_index.tsx
similarity index 96%
rename from strapi/app/routes/index.tsx
rename to strapi/app/routes/_index.tsx
index 67c72c98..68b62e76 100755
--- a/strapi/app/routes/index.tsx
+++ b/strapi/app/routes/_index.tsx
@@ -41,7 +41,7 @@ export const loader = async () => {
   );
 };
 
-const Posts: React.FC = () => {
+export default function Index() {
   const posts = useLoaderData<typeof loader>();
 
   return (
@@ -67,5 +67,4 @@ const Posts: React.FC = () => {
       })}
     </>
   );
-};
-export default Posts;
+}
diff --git a/strapi/remix.config.js b/strapi/remix.config.js
index adf2a0b5..ca00ba94 100755
--- a/strapi/remix.config.js
+++ b/strapi/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/stripe-integration/README.md b/stripe-integration/README.md
index 5427b8c0..0cac5934 100644
--- a/stripe-integration/README.md
+++ b/stripe-integration/README.md
@@ -4,17 +4,16 @@ A demo of integrate stripe payment with remix, it handles stripe function purely
 
 Relevant files:
 
-```
-└── app
-    ├── routes
-    ├── api
-    │   └── stripe-web-hook.tsx // api route to get stripe webhook postback
-    │   ├── buy.tsx // buy button and redirect to stripe payment
-    │   └── payment
-    │       ├── cancelled.tsx // stripe will redirect to this page if payment failed
-    │       └── success.tsx // string will redirect to this page if payment sucessful
-    └── utils
-        └── stripe.server.tsx // server side function to init a stripe session
+```text
+app/
+├── routes/
+│   └── api.stripe-web-hook.tsx // api route to get stripe webhook postback
+│   ├── buy.tsx // buy button and redirect to stripe payment
+│   ├── payment.cancelled.tsx // stripe will redirect to this page if payment failed
+│   └── payment.success.tsx // string will redirect to this page if payment successful
+└── utils
+│   └── stripe.server.tsx // server side function to init a stripe session
+└── root.tsx
 ```
 
 ## steps to setup
diff --git a/stripe-integration/app/routes/api/stripe-web-hook.tsx b/stripe-integration/app/routes/api.stripe-web-hook.tsx
similarity index 100%
rename from stripe-integration/app/routes/api/stripe-web-hook.tsx
rename to stripe-integration/app/routes/api.stripe-web-hook.tsx
diff --git a/stripe-integration/app/routes/payment/cancelled.tsx b/stripe-integration/app/routes/payment.cancelled.tsx
similarity index 100%
rename from stripe-integration/app/routes/payment/cancelled.tsx
rename to stripe-integration/app/routes/payment.cancelled.tsx
diff --git a/stripe-integration/app/routes/payment/success.tsx b/stripe-integration/app/routes/payment.success.tsx
similarity index 100%
rename from stripe-integration/app/routes/payment/success.tsx
rename to stripe-integration/app/routes/payment.success.tsx
diff --git a/stripe-integration/remix.config.js b/stripe-integration/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/stripe-integration/remix.config.js
+++ b/stripe-integration/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/styled-components/app/routes/__boundary/$.tsx b/styled-components/app/routes/_boundary.$.tsx
similarity index 100%
rename from styled-components/app/routes/__boundary/$.tsx
rename to styled-components/app/routes/_boundary.$.tsx
diff --git a/styled-components/app/routes/__boundary/index.tsx b/styled-components/app/routes/_boundary._index.tsx
similarity index 100%
rename from styled-components/app/routes/__boundary/index.tsx
rename to styled-components/app/routes/_boundary._index.tsx
diff --git a/styled-components/app/routes/__boundary/error.tsx b/styled-components/app/routes/_boundary.error.tsx
similarity index 100%
rename from styled-components/app/routes/__boundary/error.tsx
rename to styled-components/app/routes/_boundary.error.tsx
diff --git a/styled-components/app/routes/__boundary.tsx b/styled-components/app/routes/_boundary.tsx
similarity index 100%
rename from styled-components/app/routes/__boundary.tsx
rename to styled-components/app/routes/_boundary.tsx
diff --git a/styled-components/components/src/Box.tsx b/styled-components/components/src/Box.tsx
index 9fc6bb09..856bb3fb 100644
--- a/styled-components/components/src/Box.tsx
+++ b/styled-components/components/src/Box.tsx
@@ -2,5 +2,5 @@ import styled from "styled-components";
 
 export const Box = styled("div")`
   font-family: system-ui, sans-serif;
-  line-height: 1.4;
+  line-height: 1.8;
 `;
diff --git a/styled-components/remix.config.js b/styled-components/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/styled-components/remix.config.js
+++ b/styled-components/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/styletron/app/routes/index.tsx b/styletron/app/routes/_index.tsx
similarity index 94%
rename from styletron/app/routes/index.tsx
rename to styletron/app/routes/_index.tsx
index a33e0e30..357a3ad3 100644
--- a/styletron/app/routes/index.tsx
+++ b/styletron/app/routes/_index.tsx
@@ -2,7 +2,7 @@ import { styled } from "styletron-react";
 
 const Box = styled("div", () => ({
   fontFamily: "system-ui, sans-serif",
-  lineHeight: 1.4,
+  lineHeight: 1.8,
 }));
 
 export default function Index() {
diff --git a/styletron/remix.config.js b/styletron/remix.config.js
index ecf1253b..ca00ba94 100644
--- a/styletron/remix.config.js
+++ b/styletron/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  ignoredRouteFiles: [".*"],
+  future: {
+    v2_routeConvention: true,
+  },
+  ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/supabase-subscription/remix.config.js b/supabase-subscription/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/supabase-subscription/remix.config.js
+++ b/supabase-subscription/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/tailwindcss/remix.config.js b/tailwindcss/remix.config.js
index 70e7d824..91c0931b 100644
--- a/tailwindcss/remix.config.js
+++ b/tailwindcss/remix.config.js
@@ -10,6 +10,6 @@ module.exports = {
   tailwind: true,
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/theme-ui/README.md b/theme-ui/README.md
index f35630fe..3a9ca398 100644
--- a/theme-ui/README.md
+++ b/theme-ui/README.md
@@ -37,7 +37,7 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/routes/_index.tsx`. The page auto-updates as you edit the file.
 
 ## Commands
 
diff --git a/theme-ui/app/routes/index.tsx b/theme-ui/app/routes/_index.tsx
similarity index 100%
rename from theme-ui/app/routes/index.tsx
rename to theme-ui/app/routes/_index.tsx
diff --git a/theme-ui/remix.config.js b/theme-ui/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/theme-ui/remix.config.js
+++ b/theme-ui/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/tiptap-collab-editing/remix.config.js b/tiptap-collab-editing/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/tiptap-collab-editing/remix.config.js
+++ b/tiptap-collab-editing/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/toast-message/README.md b/toast-message/README.md
index 8a59ac2f..82ea9f3c 100644
--- a/toast-message/README.md
+++ b/toast-message/README.md
@@ -19,7 +19,7 @@ We use the `flash` method in the session object to set the message. Once we read
 ## Relevant files
 
 - [root.tsx](./app/root.tsx)
-- [index.tsx](./app/routes/index.tsx)
+- [index.tsx](./app/routes/_index.tsx)
 - [message.server.ts](./app/message.server.ts)
 
 ## Related Links
diff --git a/toast-message/app/routes/index.tsx b/toast-message/app/routes/_index.tsx
similarity index 100%
rename from toast-message/app/routes/index.tsx
rename to toast-message/app/routes/_index.tsx
diff --git a/toast-message/remix.config.js b/toast-message/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/toast-message/remix.config.js
+++ b/toast-message/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/turborepo-vercel/apps/remix-app/app/routes/index.tsx b/turborepo-vercel/apps/remix-app/app/routes/_index.tsx
similarity index 94%
rename from turborepo-vercel/apps/remix-app/app/routes/index.tsx
rename to turborepo-vercel/apps/remix-app/app/routes/_index.tsx
index b9b13f8e..ba52d5c7 100644
--- a/turborepo-vercel/apps/remix-app/app/routes/index.tsx
+++ b/turborepo-vercel/apps/remix-app/app/routes/_index.tsx
@@ -2,7 +2,7 @@ import { Button } from "ui";
 
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix Turborepo Vercel example</h1>
       <Button />
     </div>
diff --git a/turborepo-vercel/apps/remix-app/remix.config.js b/turborepo-vercel/apps/remix-app/remix.config.js
index efdfbf9e..c23fd23f 100644
--- a/turborepo-vercel/apps/remix-app/remix.config.js
+++ b/turborepo-vercel/apps/remix-app/remix.config.js
@@ -14,6 +14,9 @@ const packages = glob
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // When running locally in development mode, we use the built-in remix
   // server. This does not understand the vercel lambda module format,
diff --git a/twind/README.md b/twind/README.md
index a4e39a16..2be63ab2 100644
--- a/twind/README.md
+++ b/twind/README.md
@@ -16,7 +16,7 @@ Relevant files:
 
 - [app/entry.server.tsx](./app/entry.server.tsx) where the twind styles have been added to the markup to enable server-side-rendering (SSR) of styles.
 - [app/root.tsx](./app/root.tsx) where twind has been set up.
-- [app/routes/index.tsx](./app/routes/index.tsx) and [app/routes/anything.tsx](./app/routes/anything.tsx) where some basic styling has been demonstrated.
+- [app/routes/_index.tsx](./app/routes/_index.tsx) and [app/routes/anything.tsx](./app/routes/anything.tsx) where some basic styling has been demonstrated.
 - [remix.config.js](./remix.config.js) where the twind modules have been added to [`serverDependenciesToBundle`](https://remix.run/file-conventions/remix-config#serverdependenciestobundle).
 - [twind.config.ts](./twind.config.ts) (optional) where twind can be [configured](https://twind.dev/handbook/configuration.html).
 
diff --git a/twind/app/routes/index.tsx b/twind/app/routes/_index.tsx
similarity index 100%
rename from twind/app/routes/index.tsx
rename to twind/app/routes/_index.tsx
diff --git a/twind/remix.config.js b/twind/remix.config.js
index ceaf8bf6..5922e5d6 100644
--- a/twind/remix.config.js
+++ b/twind/remix.config.js
@@ -1,14 +1,13 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  serverBuildPath: "build/index.js",
-  publicPath: "/build/",
   serverDependenciesToBundle: [
-    "@twind/with-remix",
     "twind",
     "@twind/preset-autoprefix",
     "@twind/preset-tailwind",
+    "@twind/with-remix",
   ],
 };
diff --git a/unocss/app/routes/index.tsx b/unocss/app/routes/_index.tsx
similarity index 100%
rename from unocss/app/routes/index.tsx
rename to unocss/app/routes/_index.tsx
diff --git a/unocss/remix.config.js b/unocss/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/unocss/remix.config.js
+++ b/unocss/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/usematches-loader-data/README.md b/usematches-loader-data/README.md
index 20a8ae3a..9c99b17b 100644
--- a/usematches-loader-data/README.md
+++ b/usematches-loader-data/README.md
@@ -22,7 +22,7 @@ No need to use global React contexts anymore to access your React state.
 - Check out the [useMatchesData](app/useMatchesData.ts) implementation to see how we use `useMatches`.
 - Check out the [useOptionalUser](app/useUser.ts) implementation to see how to implement `useMatchesData` internally in custom hooks.
 - Check out the [root](app/root.tsx) loader function, to see that we use loaders to return json data server-side for our routes.
-- Check out the [index](app/routes/index.tsx) route, as an example for how to access loader data of parent and child routes across our application with our custom hooks.
+- Check out the [index](app/routes/_index.tsx) route, as an example for how to access loader data of parent and child routes across our application with our custom hooks.
 
 ## Related Links
 
diff --git a/usematches-loader-data/app/routes/index.tsx b/usematches-loader-data/app/routes/_index.tsx
similarity index 100%
rename from usematches-loader-data/app/routes/index.tsx
rename to usematches-loader-data/app/routes/_index.tsx
diff --git a/usematches-loader-data/remix.config.js b/usematches-loader-data/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/usematches-loader-data/remix.config.js
+++ b/usematches-loader-data/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/vanilla-extract/app/components/Text/Text.css.ts b/vanilla-extract/app/components/Text/Text.css.ts
index a47394ae..f5a7f117 100644
--- a/vanilla-extract/app/components/Text/Text.css.ts
+++ b/vanilla-extract/app/components/Text/Text.css.ts
@@ -11,7 +11,7 @@ import { style, styleVariants } from "@vanilla-extract/css";
 
 export const root = style({
   fontFamily: "Comic Sans MS",
-  lineHeight: "1.4",
+  lineHeight: "1.8",
 });
 
 // This is an example of how we can use `styleVariants`
diff --git a/vanilla-extract/app/routes/index.tsx b/vanilla-extract/app/routes/_index.tsx
similarity index 100%
rename from vanilla-extract/app/routes/index.tsx
rename to vanilla-extract/app/routes/_index.tsx
diff --git a/vanilla-extract/remix.config.js b/vanilla-extract/remix.config.js
index df557291..6ffe80e5 100644
--- a/vanilla-extract/remix.config.js
+++ b/vanilla-extract/remix.config.js
@@ -1,11 +1,12 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  ignoredRouteFiles: ["**/.*"],
   future: {
     unstable_vanillaExtract: true,
+    v2_routeConvention: true,
   },
+  ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/xata/app/routes/index.tsx b/xata/app/routes/_index.tsx
similarity index 100%
rename from xata/app/routes/index.tsx
rename to xata/app/routes/_index.tsx
diff --git a/xata/remix.config.js b/xata/remix.config.js
index adf2a0b5..ca00ba94 100644
--- a/xata/remix.config.js
+++ b/xata/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/yarn-pnp/app/routes/index.tsx b/yarn-pnp/app/routes/_index.tsx
similarity index 96%
rename from yarn-pnp/app/routes/index.tsx
rename to yarn-pnp/app/routes/_index.tsx
index da28b224..cec7dd07 100644
--- a/yarn-pnp/app/routes/index.tsx
+++ b/yarn-pnp/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>
       <p>
         This example is using{" "}
diff --git a/yarn-pnp/remix.config.js b/yarn-pnp/remix.config.js
index 260b82c7..ca00ba94 100644
--- a/yarn-pnp/remix.config.js
+++ b/yarn-pnp/remix.config.js
@@ -1,10 +1,11 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
+/** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };