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.