Как получить параметры строки запроса с помощью Asto

Question

Я использую совершенно новую технологию под названием Astro (https://astro.build/) для создания полностью статической страницы, отображаемой на стороне сервера, с нулевым JS.

У меня есть страница с формой, которая представляет собой простой текстовый ввод, когда пользователь заполняет ее и нажимает кнопку отправки, он отправляет запрос GET на астро-страницу. URL-адрес будет выглядеть примерно так ....

/?search=1234

Что я хочу сделать, так это получить доступ к этому параметру строки запроса, чтобы перенаправить моего пользователя на другую статическую страницу / 1234.

Я пытаюсь получить доступ к параметру quesrystring с помощью Astro.request, но объект, включая атрибут параметров, полностью пуст.

Есть ли способ получить доступ к параметрам строки запроса из страницы / файла .astro?

Answer 1

вы можете использоватьAstro.url(доступно с версии v1.0.0-rc).

например

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

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

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

Answer 2

Я связался с разработчиками Astro и в конце концов получил электронное письмо. Эта функциональность невозможна с Astro, это не ошибка, а скорее мое непонимание того, как работает Astro. Страницы в Astro отображаются заранее и полностью статичны.

Answer 3

Это возможно с Astro и может быть сделано с помощью тегов в .astroсоставная часть.

Вот example.astroфайл:

      ---
<!-- 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 -->

Документация по использованию <script></script>теги таким образом с Astro можно найти здесь: https://docs.astro.build/en/core-concepts/component-hydration/

(Прокрутите вниз до «Могу ли я гидратировать компоненты Astro?»).

Эта функция предназначена специально для простой интерактивности DOM или случаев, когда вам нужен доступ к JavaScript. windowили же document.

Answer 4

Я хотел сделать то же самое, но это похоже на ошибку в Astro, которая не предоставляет параметры queryString, но вот способ реализовать это только с помощью ванильного javascript, но обратите внимание, что это можно сделать только на стороне клиента, поскольку это это просто джаваскрипт...

Для строки запроса:

      localhost:3000/test?search=123

Чтобы получить параметры:

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

Этот подход можно увидеть в: этот вопрос , а также