Create route to other route parameters, similar to generatePath in React Router

[OFranke]

In react router there is the generatePath method:

generatePath("/user/:id/:entity(posts|comments)", {
  id: 1,
  entity: "posts"
});

I would like to use a similar thing based on remix matches to generate URLs to different route params, see image:

Currently I am on the route http://localhost:3000/filiale/e07d4c4e-29df-4d26-8b26-1b50b91e0c1d/suche
From my dropdown component I would like to generate links to other ids, e.g. to http://localhost:3000/filiale/xxx-another-id-xxx/suche.

So basically I just want to switch out the ID and probably other URL parameters and keep the rest as it is.

I was thinking about useMatches here:

Some draft pseudocode to describe what I would like to achieve:

import { useMatches } from "remix";
import type { Params } from "react-router";
type StoreSelectionProps = {
  stores: Store[];
};

function generateUrl(
  matches: ReturnType<typeof useMatches>,
  params: Params<string>
) {
  console.log("matches", matches);
  console.log("params", params);
  // use the last match in matches (which I assume must be my current route)
  // switch current route params with new provided params
  // return new URL
}

export const StoreSelection = ({ stores }: StoreSelectionProps) => {
  const [selectedStore, setSelectedStore] = useState(stores[0]);
  const matches = useMatches();
  generateUrl(matches, { storeId: "xxx-another-id-xxx" });

I have scrolled through the docs but did not find if something like that already exists, so I'd like to propose that as a feature. Let me know what you think! :)

[sergiodxa]

You can import generatePath from react-router-dom if it's not re-exported from @remix-run/react

[OFranke]

Yep that’s true but I can’t just feed the id from matches inside generatePath because it’s kinda different, e.g. it contains $ for Params instead of :
Pretty sure I can write some Transformator that transforms the remix id path into a path I can use with generatePath from react router.

But I think the better approach would be to use the same thing that remix uses internally to resolve the path, but I haven’t found anything to hook in, not sure where to look at