Remix routing v2 system

Question

I'm new to remix and I face an issue regarding the v2 routes system.

I try the v2 that keep all the routes to the base folder but with a lot of routes is very confusing. So I prefer to split the routes with folders convention that match my app use cases.

I try to implement it base on folders-for-organization but didn't succeed.

So to workaround with the old way(v1) I use the package "@remix-run/v1-route-convention": "^0.1.4" and add a config in remix.

If someone could help me with it.

To help you with the answer I create this stackblitz base on the remix tutorial template https://stackblitz.com/edit/remix-run-remix-sxej2u?file=app%2Froot.tsx

Thanks in advance.

Answer 1

In your remix.config, if you're using any convention other than the default (v2 routing), you'll need to make sure you ignore all files in the routes folder. Otherwise you'll have issues, since the default convention tries to process files in the wrong format.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ['**/*'], // <-- ignore all files (remove the '.')
  serverModuleFormat: 'cjs',
  future: {
    // makes the warning go away in v1.15+
    v2_routeConvention: true,
  },
  routes(defineRoutes) {
    // uses the v1 convention, works in v1.15+ and v2
    return createRoutesFromFolders(defineRoutes);
  },
};