In file-based routing, how to avoid duplicating files?
I'm puzzling over this situation. Let's say I have a multi-step edit flow and create flow that have some differences but mostly have the same steps, which are sub-routes.
- entity/edit/$id (directory)
- route.tsx (outlet, data fetch)
- options.tsx
- packages.tsx
- entity/create (directory)
- route.tsx (outlet)
- options.tsx
- packages.tsx
- confirm.tsx
Can I avoid duplicating
options.tsx and other shared steps? Or do I have to have both options.tsx files that import shared functionality?7 Replies
like-gold•2w ago
is options a route?
then you have to repeat it
wise-white•2w ago
right now the options are 2 distinct routes, e.g:
/entity/edit/$id/options
/entity/create/options
if both routes render the same view and depend on the same logic, you could simplify it alike:
/entity/options
/entity/packageslike-goldOP•2w ago
The edit flow gets an entity id in its route, so it is different. And the edit and create flow share some steps, but have some different steps.
I'm new to file-based routing so it seems strange to me to have to 'duplicate' a file. But I guess that's the way it is.
wise-white•2w ago
I'm a bit confused about the issue itself, what do you mean by duplication?
If both edit and create pages share the same functionalities (such as same query params) you could create an outlet layer which exposes the query params to both routes.
I have many scenarios where I render the same view for both the create and the edit pages
like-goldOP•2w ago
Duplicated, meaning with the routes as described, I would need two
options.tsx files (as in my original post). One in the edit directory, and the other in the create directory. Of course, I could make the two options.tsx files just shells that import the same content, but they would have to exist as separate files to build the distinct routes, right?
The edit flow needs an $id in the route to pull the data to edit. The create flow does not. So they can't both use entity/options
I suppose if I wanted to get fancy I can make edit|create a path param, and $id an optional path param, like entity/$action/{-$id}/options
In your scenarios where you render the same view, do they have different routes?wise-white•2w ago
It doesn't seem like a real issue since as you said you aren't actually duplicating a route just creating the same route name for 2 distinct route paths.
Either way - if u really want to use just 1 options route for it, you could define just one route for both edit and create flows, and then check if the ID is 'new'.
Always render under entity/$id, and have a special case where the id is the literal 'new', if it is you are in create mode, if not u are in edit.
This way u can define only 1 options route for both edit and create flows (e.g entity/$id/options)
Does this resolve your issue?
like-goldOP•2w ago
Yes. Thanks for the advice!