SolidJS•10mo ago

Is this really the most ergonomic way to preserve searchParams with <A>?

I've got what I imagine is a pretty common pattern: displaying a list of entities on the left, each one clickable, and when you click it a detail view shows up on the right. The list is filterable, and those filters end up as searchParams. An example URL might be /locations/123/leads/456?leadsCategory=3. For the anchor tags on the left, I've got the following JSX (searchParams is destructured from useSearchParams()):

<A
  href={`/locations/${
    params.clientId
  }/leads/${
    props.lead.id
  }?${
    new URLSearchParams(searchParams).toString()
  }`}
>

<A
  href={`/locations/${
    params.clientId
  }/leads/${
    props.lead.id
  }?${
    new URLSearchParams(searchParams).toString()
  }`}
>

This works, but it feels... unergonomic. Is there a better or cleaner way to preserve the searchParams when using <A /> or is this the "right" way?

1 Reply

foolswisdom•10mo ago

I don't think there's any built in way to do that But you could easily abstract it away with a helper (or better yet, a wrapper component) that does this for you, so that you don't have to constantly do this over and over

Gaming

Programming

Is this really the most ergonomic way to preserve searchParams with <A>?