如何使用 Astro 获取查询字符串参数

2024-03-25

我正在使用一种名为 Astro 的新技术(https://astro.build/ https://astro.build/)构建一个完全静态的服务器端渲染页面,交付零 JS。

我有一个带有简单文本输入表单的页面,当用户填写该表单并单击提交按钮时,它会向 astro 页面发送 GET 请求。网址看起来像这样......

/?搜索=1234

我想要做的是访问该查询字符串参数,以便将我的用户重定向到另一个静态页面 /1234。

我尝试使用 Astro.request 访问 quesrystring 参数,但该对象(包括参数属性)完全为空。

是否有办法从 .astro 页面/文件访问查询字符串参数?


您可以使用Astro.url https://docs.astro.build/en/reference/api-reference/#astrourl(自 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 -->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Astro 获取查询字符串参数 的相关文章

  • codePointAt 和 charCodeAt 之间的区别

    有什么区别String prototype codePointAt and String prototype charCodeAt 在 JavaScript 中 A codePointAt 65 A charCodeAt 65 从 MDN
  • 使用 jQuery live() 初始化插件?

    使用 jQuery 在特定类的所有当前和未来元素上自动初始化插件的最佳方法是什么 例如 假设我想要全部
  • Express 4 中的查询字符串变量仍然为空

    按照此处的建议编写简单的服务器堆栈溢出 https stackoverflow com questions 5710358 how to retrieve post query parameters 休息 api js const expr
  • 为什么人们将自己的自定义/用户函数添加到 jQuery 对象中? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我见过人们将自己的自定义 用户功能添加到jQuery目的 例如 myUserFunc function regular JS code 你为什么
  • sails js 数据关系

    sails js 是否支持模型 集合之间的关系 如果是这样 有人可以指出文档吗 例如 我有 2 个模型 1 生产 production name string description text 2 Album album name stri
  • NodeJS 路由器负载太大

    我在 Nodejs 应用程序中创建休息端点 如下所示 在我的 server js 中 我有以下代码 var express require express var app express app use express json limit
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • Slack Webhook - 获取 Invalid_Payload

    我正在尝试设置 Slack 的 Webhook 但收到 Invalid Payload 错误消息 我浏览过 Stack Slack 和 Github 但找不到我想要的答案 为了保护隐私 其中的 自定义链接 正在使用实际链接 CODE var
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • 单击 btn 而不触发 div 单击未按预期工作

    代码沙盒 https codesandbox io s currying breeze depdc9 file package json https codesandbox io s currying breeze depdc9 file
  • 如何将值从孩子的孩子传递给父母?

    我有一个父组件 有一个子组件 它也有一个子组件 Parent Child One child of parent Child Two child of child 当在子二中定义一个值时 我使用回调将该值传递给子一 但我也想将相同的值传递回
  • Nodejs 异步 Promise 队列

    我需要使用速率受限的 API 例如 我一秒钟只能进行 10 个 API 调用 因此我需要等待当前秒结束才能进行另一个 API 调用 为了实现这一目标 我想创建一个可以自行管理的异步队列 它的主要功能是让我向队列添加一个新的 Promise
  • 如何将类组件中的 props 发送到功能组件?

    我是 ReactJS 的初学者 需要知道如何将一个页面中的 props 值发送到另一个页面 道具位于第一页上我可以获取类组件值如何获取另一页中的值 提前致谢 墙色 jsx import React Component from react
  • 如何在 Node.js 中打开 Windows-1255 编码文件?

    我有一个 Windows 1255 希伯来语 编码的文件 我希望能够在 Node js 中访问它 我尝试使用打开文件fs readFile 它给了我一个Buffer我无能为力 我尝试将编码设置为Windows 1255 但这没有被识别 我还
  • 从数组创建树并将父字段的表示形式更改为对象而不是 ID

    我堆满了琐碎的问题 但找不到解决方案 任何帮助将不胜感激 我有一个对象数组 id 1 title home parent null id 2 title about parent null id 3 title team parent 2
  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp
  • 使用 Puppeteer 和 Headless Chrome 获取 DOM 节点文本

    我正在尝试使用无头 Chrome 和 Puppeteer 来运行我们的 Javascript 测试 但我无法从页面中提取结果 基于这个答案 https stackoverflow com a 45799744 4794 看起来我应该使用pa
  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale
  • 使用 jQuery 的 ajax 方法以 blob 形式检索图像

    我最近问了另一个 相关 问题 这导致了这个后续问题 提交数据而不是输入表单的文件 https stackoverflow com questions 17643142 submitting data instead of a file fo
  • 如何在控制台中隐藏日志消息的来源?

    当将消息输出到控制台时 还会显示源代码 在 Chrome 开发者工具中 它位于右侧 console log Foo Source Foo test js 1 Output 但是 在某些网站上 会显示消息without正在显示的源 例如Fac

随机推荐

  • 用于选择多个记录的良好 UI 示例

    我目前正在重新审视基于 Windows 的软件的一个区域 并考虑将关系从 1 gt M 更改为 M gt M 因此 我需要调整 UI 以适应选择多个相关记录 有很多常见的方法可以处理这个问题 但通常都很笨拙 示例包括所有项目的两窗格列表和所
  • 通过 C# 代码以不同用户身份静默运行 .bat 文件

    我每隔几秒运行一个批处理文件 使用以下代码与服务器进行时间同步 Process process new Process process StartInfo WorkingDirectory Environment GetFolderPath
  • 目标没有战术支持

    我有一些代码 我想在一些策略的帮助下检查它们 因为我有很多if then else声明 我要申请elim term ite tactic 我使用了以下策略 check sat using then simplify arith lhs tr
  • 使用基本 R 进行分组和堆叠条形图

    我想创建一个组合条形图 其中 data1 和 data2 内堆叠 而 data1 和 data2 之间分组在基本 R 图形中 安排上是这样的 data1 lt matrix c 1 5 rep 1 5 rep 4 5 ncol 5 data
  • HTML 重新加载下拉值 JavaScript

    我有一个这样的脚本
  • 如果列值为NULL,如何实现默认值?

    我想用这些条件从表中检索一些列值 如果值为 NULL 或 空字符串 则返回一些用户定义的值 如果不满足条件 则返回其值 我怎样才能弄清楚 这是我的表查询 CREATE TABLE AUCTION CAR BID bid seq bigint
  • graphviz.backend.ExecutableNotFound:无法执行 ['dot', '-Tpng'],请确保 Graphviz 可执行文件位于系统的 PATH 上

    我花了一个小时找不到这个问题的任何解决方案 所以决定最好在这里提问 唯一给出的丰富信息here https stackoverflow com questions 35064304 runtimeerror make sure the gr
  • Ctrl-c 不使用 Git Bash 停止 Tomcat

    正如标题所示 我使用 Windows 7 在 Git Bash 上运行 Tomcat 但无法使用 Ctrl c 关闭服务器 当我按下它时 光标会消失半秒钟 但除此之外什么也没有发生 编辑 在 VSCode 的集成终端中运行 git bash
  • C# 中的工程符号?

    是否有任何代码 或内置函数 允许以工程符号输出浮点数 例如 1 5e 4将显示为150 5e 3 将显示为5m 这可能需要重构 private static string ToEngineeringNotation this double
  • android 无法打开文件进行读取

    您好 我创建了我的第一个 Hello World 应用程序 并按照以下说明进行操作 发布在developer android上 但是当我连接我的索尼xperia s时 启用调试并运行我的应用程序 我在 logcat 错误中看到说 E 444
  • 如何在 CentOs 中安装 php-xml

    我正在尝试在 CentOs 6 5 上安装 php xml 我输入命令yum install php xml 我收到此错误 Loaded plugins fastestmirror Loading mirror speeds from ca
  • maven(在开发配置文件下运行)如何包含index.html中的javascript文件?

    从 2 0 版开始我就没有使用过 jhipster 目前我正在追赶版本 4 0 6 当我尝试通过 mvnw 构建初始应用程序时 默认情况下devmaven 配置文件 从命令行 应用程序 javascript 文件不会添加到 index ht
  • 引用 dll 而不复制它们 C#

    当我们创建一个新的C 项目并引用一个dll时 该dll在编译项目时会被复制到项目的输出目录中 有没有一种方法可以引用 dll 文件而不将它们复制到项目的输出目录 并让可执行文件在运行时使用它们 类似于Assemblies如果我没错的话 我尝
  • AWS CDK 将 API 网关 URL 传递到同一堆栈中的静态站点

    我正在尝试在单个堆栈中部署 S3 静态网站和 API 网关 lambda S3 静态站点中的 JavaScript 调用 lambda 来填充 HTML 列表 但它需要知道 lambda 集成的 API 网关 URL 目前 我生成一个 Re
  • 如何强制视图刷新而不从可观察对象自动触发它?

    Note 这主要是为了调试和理解 KnockoutJS 有没有办法显式请求 Knockout 从 已绑定 视图模型刷新视图 我正在寻找类似的东西 ko refreshView 我知道这不是 Knockout 的预期用途 但我仍然想知道是否有
  • android studio 使用 build.gradle 进行地址清理

    我正在尝试使用此处描述的地址清理程序 使用 clang 构建我的应用程序 https github com google sanitizers wiki AddressSanitizer https github com google sa
  • 获取HashMap值的count个数

    使用这里的代码link https stackoverflow com questions 37129625 read and find string from text file将文本文件内容加载到 GUI Map
  • 谷歌分析用户 ID 跟踪

    我通过通用分析实现了 userID 跟踪 ga set uid 我认为我应该能够在报告中看到特定用户 但似乎甚至不可能在任何类型的报告中显示不同的用户 我在分析 API 中也没有找到这个选项 我希望能够跟踪该特定用户创建的事件 是否可以在不
  • 如何重命名 git stash?

    我有一个名称不正确的藏品 我想修正这个名称 使其准确 如何重命名藏匿处 让我们假设您的存储列表如下所示 git stash list stash 0 WIP on master Add some very important feature
  • 如何使用 Astro 获取查询字符串参数

    我正在使用一种名为 Astro 的新技术 https astro build https astro build 构建一个完全静态的服务器端渲染页面 交付零 JS 我有一个带有简单文本输入表单的页面 当用户填写该表单并单击提交按钮时 它会向