How to define multiple routes with same route file

[juniorforlife]

I have 4 pages:

• home, library sharing the same layout which has a header & footer
• login and signup no header & footer

So my folder structure is like this:

login.tsx
signup.tsx
__main.tsx
__main
    home.tsx
    library.tsx

What I'm trying to do is to have both / and /home end up in the same route file home.tsx.
I tried adding this code in remix.config.js:

routes: async (defineRoutes) => {
    return defineRoutes((route) => {
      route("/", "routes/__main.tsx", () => {
        route("/", "routes/__main/home.tsx");
      });
    });
  },

It works for / but when I visit /home it will throw 404 error.

If I make it like this

routes: async (defineRoutes) => {
    return defineRoutes((route) => {
      route("/", "routes/__main.tsx", () => {
        route("/", "routes/__main/home.tsx");
      });
      route("/home", "routes/__main.tsx", () => {
        route("/home", "routes/__main/home.tsx");
      });
    });
  }

then Remix throws error saying Unable to define routes with duplicate route id: "routes/__main"

What should be the right way to achieve this?

[kiliman]

You need to give each route a unique id... by default, Remix uses the file path without extension.

routes: async (defineRoutes) => {
    return defineRoutes((route) => {
      route("/", "routes/__main.tsx", { id: 'routes/__main-index' }, () => {
        route("/", "routes/__main/home.tsx", { id: 'routes/__main/home-index' });
      });
      route("/home", "routes/__main.tsx", () => {
        route("/home", "routes/__main/home.tsx");
      });
    });
  }

[juniorforlife]

thanks @kiliman! Is this the only way or can we restructure the folder somehow?
Also I face another problem which is isActive of NavLink is false when I visit /. Can we somehow tell Remix router that those are the same?

[kiliman]

Honestly, if were me, I would just redirect / to /home. I'm not sure there are any good solutions for route aliases that won't feel "dirty".

[juniorforlife]

got it. thank you

[marcfalk]

You need to give each route a unique id... by default, Remix uses the file path without extension.

routes: async (defineRoutes) => {
    return defineRoutes((route) => {
      route("/", "routes/__main.tsx", { id: 'routes/__main-index' }, () => {
        route("/", "routes/__main/home.tsx", { id: 'routes/__main/home-index' });
      });
      route("/home", "routes/__main.tsx", () => {
        route("/home", "routes/__main/home.tsx");
      });
    });
  }

Thanks 🙏

Nowhere to be found in the docs for for React Router 7.x - but giving each route an ID worked!

With this config:

...
route(':locale?/about', 'routes/about.tsx'),
route(':locale?/om', 'routes/about.tsx'),
...

I got this error: Unable to define routes with duplicate route id: "routes/about"

But with this config it works as expected:

...
route(':locale?/about', 'routes/about.tsx', { id: 'about' }),
route(':locale?/om', 'routes/about.tsx', { id: 'om' }),
...

Multiple routes using the same component.