1

I'm using quite a new technology called Astro (https://astro.build/) to build a completely static, server side rendered page, shipping zero JS.

I have a page with a form that is a simple text input, when the user fills this in and clicks the submit button, it sends a GET request to an astro page. The url will look something like this ....

/?search=1234

What I want to be able to do is get access to that querystring parameter in order to redirect my user to another static page /1234.

I am trying to access the quesrystring parameter with Astro.request, but the object, including the parameters attribute is completely empty.

Is there anyway to access the querystring parameters from a .astro page/file?

Zoe stands with Ukraine
  • 25,310
  • 18
  • 114
  • 149
DrLazer
  • 2,577
  • 3
  • 35
  • 51

3 Answers3

1

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

Someone
  • 178
  • 8
1

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.

DrLazer
  • 2,577
  • 3
  • 35
  • 51
0

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.

joshuaiz
  • 365
  • 3
  • 11