Custom routes with defineRoutes

Does someone have some extra info about defineRoutes function in remix.config?

I have a this route:

{     
"id": "routes/__main/city/$city", "path": "/city/:city",
"file":"routes/__main/city/$city.tsx"
}

and in defineRoutes I made something like this:

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

I want that both /citta/test and /city/test will go on the same file located here routes/__main/city/$city.tsx.

But when I run the code only the /citta/test route is active the other one /city/test will throw error.

As I read from the docs here https://remix.run/docs/en/v1/api/conventions#routes, what I want to achive should be possible.

Have I misunderstood the use of defineRoutes?


This can be solved without the use of defineRoutes. Revert your remix.config changes and let Remix handle the routing for you by placing your routes within app/routes.

Move routes/__main/city/$city.tsx in your app directory and add an additional folder structure app/routes/__main/citta/$city.tsx. So you have two folders /city and /citta next to each other. They will share all the nested routing that you introduced with __main.

Export the following from your app/routes/__main/citta/$city.tsx file:

import CityComponent from '~/routes/__main/city/$city';

// re-export loader, action, and all other functionality
export * from '~/routes/__main/city/$city'
// re-use the default export from your other route
export default CityComponent;

This lets you reuse the code from your city/$city.tsx file in citta/$city.tsx.

Note: Make sure to name both files in citta/ and city/ $city.tsx to avoid naming discrepancies. Otherwise your re-exported loader and action won't work as the parameter name differs.