How to get the querystring parameters with Astro

I wanted to do the same thing, but this seems to be a bug in Astro that doesn't provide queryString parameters, but here is a way to implement it with just Vanilla javascript, but note that this can be only done client side as it is just javascript...

For the queryString:

localhost:3000/test?search=123

To get the parameters:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

This approach can be seen in: this question as well

I reached out to the developers of Astro and eventually had an email back. This functionality is not possible with Astro, it is not a bug, rather a misunderstanding from me about how Astro works. The pages in Astro are rendered up-front and are entirely static.

This is possible with Astro and can be done using <script></script> tags in a .astro component.

Here's an example.astro file:

---
<!-- imports go in here -->
---
<script>
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log('params', params);
</script>

<!-- rest of your template markup -->

Documentation of using <script></script> tags in this way with Astro can be found here: https://docs.astro.build/en/core-concepts/component-hydration/

(Scroll down to 'Can I Hydrate Astro Components?').

This feature is specifically there for simple DOM interactivity or cases where you need access to the JavaScript window or document.

you can use Astro.url (available since v1.0.0-rc).

e.g.

---
const search = Astro.url.searchParams.get('search')! || '';
---

{search ? <p>you searched for: {search}</p>}

<!-- rest of your template markup -->