Support root/route.tsx: folder for the root route

[lpsinger]

In the v2 route module convention, all routes except for the root route can be folders, containing a route.tsx file that implements the route module API and any number of additional files for components or server-side stuff.

It would be nice to have this capability for the root route too! My root route is quite complicated and imports a bunch of other files. I'd love to be able to turn it into a directory!

[lpsinger]

I think I see how to implement this. The easiest approach, though, would be to modify the flatRoutes function in @remix-run/dev so that the root route is included in the returned RouteManifest. That would technically be an API change. Is that alright?

[sergiodxa]

Since root is inside app/root.tsx, couldn't you just put a folder there?

app/root.tsx
app/root/a-component.tsx
app/root/some-util.ts

[lpsinger]

Yes, I could, but the idea of this proposal is to support

app/root/route.tsx
app/root/a-component.tsx
app/root/some-util.ts

just as you can for other route modules.

[qw-in]

You could potentially try doing this in "userland". I'm not sure if the v2 routing strategy is easy to import & patch though

[kiliman]

Unfortunately, there's an issue with Remix when returning root route config, since it will accidentally set the parentId to "root". I created a patch for the errant code.

routes: async defineRoutes => {
  return { root: { path: '', id: 'root', file: 'path/to/root.tsx' } }
}

Here's before patch

{
  root: { path: '', id: 'root', file: 'path/to/root.tsx', parentId: 'root' },
  ...
}

<Routes>
</Routes>

Here's after patch

{
  root: { path: '', id: 'root', file: 'path/to/root.tsx', parentId: undefined },
  ...
}

<Routes>
  <Route file="path/to/root.tsx">
    <Route path="*" file="routes/$.tsx" />
    <Route path="forgot-password" file="routes/_auth+/forgot-password/index.tsx" />
    <Route path="login" file="routes/_auth+/login.tsx" />
    <Route path="logout" file="routes/_auth+/logout.tsx" />
    ...
  </Route>
</Routes>

Patch: @remix-run+dev+1.19.3.patch

diff --git a/node_modules/@remix-run/dev/dist/config.js b/node_modules/@remix-run/dev/dist/config.js
index 71e5f29..c308b04 100644
--- a/node_modules/@remix-run/dev/dist/config.js
+++ b/node_modules/@remix-run/dev/dist/config.js
@@ -401,10 +401,11 @@ async function readConfig(remixRoot, serverMode = serverModes.ServerMode.Product
     for (let route of Object.values(manualRoutes)) {
       routes$1[route.id] = {
         ...route,
-        parentId: route.parentId || "root"
+        parentId: route.id === 'root' ? undefined : route.parentId || "root"
       };
     }
   }
   let watchPaths = [];
   if (typeof appConfig.watchPaths === "function") {
     let directories = await appConfig.watchPaths();

[sergiodxa]

Another option is to make root just render an Outlet, and move your root route to a pathless layout route (root is a special pathless layout route anyway)

app/routes/_root/root.tsx
app/routes/_root/a-component.tsx
app/routes/_root/some-util.ts
app/routes/_root._index.tsx <- your index
app/routes/_root.about/root.tsx <- another route
app/root.tsx

In app/root.tsx just put

export default function Component() {
  return <Outlet />
}

[lpsinger]

Then you have _root. littered on every filename.

[sergiodxa]

Yeah, but you won't need to patch Remix to use defineRoutes in remix.config. You can rename it to just _ instead of _root so at least is smaller. Or you could use remix-flat-routes hybrid routes approach so you have put everything in a folder.

[lpsinger]

Right. But I'm offering to contribute a patch to Remix.

The question I am trying to ask is: in that patch, may I have the RouteManifest contain the root route, or should I arrange for it to exclude the root route, as it currently does?

[kiliman]

If you look at the patch above, it's a simple fix to enable returning the root route config. This won't require any other changes.

#7033 (reply in thread)