Issue with Excluding Specific Route from Predefined Layout (Flat Folders)

[DEEP-24]

Hi @kiliman ,

First of all, I want to commend you for your fantastic library, which has become an integral part of all my projects. However, I'm facing an issue that seems to be a limitation within the library itself.

The challenge is related to excluding a specific route (login) within a directory (faculty) from using its predefined layout route (_layout.tsx). Despite extensive attempts, including following all instructions outlined in the library's documentation, the issue persists. I do apologize if I've missed anything in the documentation.

I would like to add that creating a separate app/routes/faculty_.login.tsx isn't my desired solution. Instead, I'm interested in housing this within the existing faculty directory.

Here's my existing directory structure:

app/routes/
├── _index.tsx
├── faculty+
│   ├── _layout.tsx
│   ├── index.tsx
│   └── login.tsx
├── healthcheck.tsx
├── logout.tsx
└── student+
    ├── index.tsx
    ├── join.tsx
    └── login.tsx

Considering the above, it appears that the library might lack a feature or mechanism to allow a specific route to bypass the predefined layout route. Could you please provide some guidance on this or consider it as a potential feature for a future update?

I look forward to your assistance in resolving this.

[kiliman]

First of all, thanks for the kind words. I'm glad it has been helpful.

As for the layout problem, that is indeed a limitation of the routing convention. The issue is that we're using the file system for both URL definition as well as nested layouts.

So essentially, you're asking for the URL: /faculty/login but don't want login to use the faculty layout. Normally this would be handled via a faculty_.login.tsx route, but as you state, you'd prefer to keep it in the faculty+/ folder.

One potential solution is to add support for a _. prefix to your route. So you'd have the file faculty+/_.login.tsx. This would be treated the same as faculty_.login.tsx which is what you want.

In the meantime, you could support this dynamically:

// faculty+/_layout.tsx

export default function Component() {
  const matches = useMatches()
  const leaf = matches.at(-1)
  // return <Outlet> only on login route
  return leaf.id.endsWith('/login') ? <Outlet /> : <Layout />
}

function Layout() {
  return // your original layout
}

[DEEP-24]

Hi @kiliman,
Thank you for your quick response.

I attempted to implement your suggestion and tried using faculty+/_.login.tsx. However, I noticed that it still renders the layout route, which isn't the desired behavior. To further ensure this wasn't due to a pre-existing configuration, I even set up a new standalone indie stack specifically for testing, but the result was the same - it continues to render the layout route.

For your reference, here is my remix.config.js file:

const { flatRoutes } = require("remix-flat-routes");

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  future: {
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  ignoredRouteFiles: ["**/.*", "**/*.test.{js,jsx,ts,tsx}"],
  postcss: true,
  serverModuleFormat: "cjs",
  tailwind: true,
  routes: async (defineRoutes) => {
    return flatRoutes("routes", defineRoutes);
  },
};

And here's the revised route layout structure:

app/routes/
├── _index.tsx
├── faculty+
│   ├── _layout.tsx
│   ├── index.tsx
│   └── _.login.tsx

I would appreciate any further guidance or suggestions on how to address this. The goal is to have the _.login.tsx route not render the layout route.

Thank you for your help.

[kiliman]

Sorry if I wasn't clear.

One potential solution is to add support for a _. prefix to your route. So you'd have the file faculty+/_.login.tsx. This would be treated the same as faculty_.login.tsx which is what you want.

When I said "add support", I meant it would require an update to the routing. That's why I gave you a workaround until the feature was implemented.

[kiliman]

BTW: In your remix.config file, the ignoredRoutesFiles value should be ['**/*'] (ignore all files). Otherwise, the default routing convention would process them first before remix-flat-routes.

module.exports = {
  ignoredRouteFiles: ["**/*"],
  routes: async (defineRoutes) => {
    return flatRoutes("routes", defineRoutes, 
      { ignoredRouteFiles: ["**/.*", "**/*.test.{js,jsx,ts,tsx}"], }
    );
  },
};

[DEEP-24]

Apologies for any confusion in our previous discussions.

I sincerely appreciate your assistance thus far. In light of our discussions, I've decided to adopt a dynamic approach to handle this situation for the time being.

Thanks again for your help and guidance.

[kiliman]

No problem. I'll try to get that added this weekend.

[kiliman]

This has been added to v0.5.10

[DEEP-24]

Thank you for resolving the issue and adding the feature to the new update! Your efforts are greatly appreciated.