Replies: 1 comment 3 replies
-
The nice thing about Remix is that you control your route configuration. By default, Remix provides a file-based convention "out of the box." However, you can replace or augment existing routes. You do this via the https://remix.run/docs/en/main/file-conventions/vite-config#routes Here, I'm bypassing export default defineConfig({
plugins: [
remix({
routes: () => {
const commonPage = "pageA";
const newPages = ["pageB", "pageC"];
const steps = ["stepA", "stepB", "stepC"];
const routes: Record<string, ConfigRoute> = {};
newPages.forEach((newPage) => {
steps.forEach((step) => {
const routeId = `${newPage}.modal.${step}`;
routes[routeId] = {
id: routeId,
parentId: "root",
path: `${newPage}/modal/${step}`,
file: `routes/${commonPage}.modal.${step}.tsx`, // use the same file for all new pages
};
});
});
// new "virtual" routes will be merged with existing routes
return routes;
},
}),
tsconfigPaths(),
],
}); You can verify your new routes using <Routes>
<Route file="root.tsx">
<Route path="pageA/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
<Route path="pageA/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
<Route path="pageA/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
<Route index file="routes/_index.tsx" />
<Route path="pageB/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
<Route path="pageB/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
<Route path="pageB/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
<Route path="pageC/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
<Route path="pageC/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
<Route path="pageC/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
</Route>
</Routes> NOTE: I didn't consider nested routes (setting parentId). I don't know exactly how your routes are structured, so I didn't want to make assumptions. |
Beta Was this translation helpful? Give feedback.
-
(remix 2.8.1 using Vite)
Problem example
For remix project I have a modal that works with on several routes. Below a simplified structure. Let's say we have one page with the modal,
pageA
.This works great however I need to be able to open this from a second page under a different url, under a different layout. I can not navigate to the other page as I need the state when the modal is closed. Currently the best fix I found was copying the routes.
And then the route.tsx for page for pageB.modal.stepA` might look like this:
This is how my project works for now.
A small problem with this is that I can not use
export * from
to re-export the named exports. If I try this, the loader runs but useLoaderData is null, this might be a bug.But my actual problem is that I now have to copy a lot of routes, (I now need it it for a third page).
I could move the logic to some component files but that keeps me with the same problem and that's the fact that I now have lots of extra route files/folders.
I don't want to opt out of the router as I do enjoy the way it works, but perhaps I can somehow add a single exception that pageB.modal is rerouted to pageA.modal?
The perfect ,but probably not feasible, solution would be support for some or-operator in route names, something like
pageA|pageB.modal.stepA
.Does anyone have an idea on how to handle this?
Beta Was this translation helpful? Give feedback.
All reactions