S
SolidJS•17mo ago
kerrick

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
foolswisdom•17mo 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

Did you find this page helpful?