next.js 如何在url中显示参数的数组格式?

cfh9epnr  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(164)

任务

我正在做NextJS 12项目,我想把一个数组作为参数传递给查询。

预期

格式应该是这样的:
/path?address_id=1235&roofs=[1,2]&lang=en

当前

然而,当我传递数组时,我得到了一个编码的结果:
/path?address_id=1235&roofs=%5B1%2C2%5D&lang=en

代码

router.replace({
                    pathname: '/panel_placement',
                    query: {
                        address_id: '11842008',
                        roofs:`[${selectedRoofs.join(',')}]`, //here
                        lang,
                    },
                });
6tdlim6h

6tdlim6h1#

不可以,您不能直接将数组作为URL中的参数传递。URL用于识别和定位网络上的资源,它们遵循特定的格式。URL参数通常表示为键值对,用等号(=)分隔,并用&(&)连接。
虽然不能将数组作为URL中的参数直接传递,但可以将数组表示为字符串,然后将其作为参数传递。有几种常见的方法可以实现这一点:
逗号分隔值:将数组元素转换为逗号分隔的字符串,并将其作为参数传递。例如:?array = element1,element2,element3.
查询字符串参数:将数组序列化为查询字符串格式,并将其作为参数传递。例如:?array []= element1&array []= element2&array []= element3。在此方法中,数组表示为多个同名参数,后跟方括号[]。
JSON编码:将数组转换为JSON字符串,并在将其作为参数传递之前对其进行URL编码。例如:?array =%5B%22element1%22,%22element2%22,%22element3%22%5D。这里,%5B表示URL编码中的[,%22表示"。
在服务器端,您需要解析参数值,并根据所选的表示方法将其转换回数组。
URL有最大长度限制,因此如果数组很大,您可能会遇到URL长度限制的问题。在这种情况下,其他方法,如使用POST请求或以不同格式编码阵列(例如Base64)可能更合适。
参见RFC 3986标题为“统一资源标识符(URI):通用语法。"

相关问题