如何在URL中以数组格式展示参数？NextJS 12路由问题

问题说明 #

开发NextJS 12项目时，想把数组作为查询参数传递，期望的URL格式是：
/path?address_id=1235&roofs=[1,2]&lang=en

但实际用现有代码传递时，数组被自动URL编码，得到的结果是：
/path?address_id=1235&roofs=%5B1%2C2%5D&lang=en

当前使用的代码：

router.replace({
                    pathname: '/panel_placement',
                    query: {
                        address_id: '11842008',
                        roofs:`[${selectedRoofs.join(',')}]`, //这里处理数组
                        lang,
                    },
                });

解决方法 #

方法1：直接传数组（后端需支持多参数格式） #

如果后端能接受roofs=1&roofs=2这种多参数形式，不用手动拼接字符串，直接把数组赋值给roofs即可，NextJS会自动生成对应格式：

router.replace({
    pathname: '/panel_placement',
    query: {
        address_id: '11842008',
        roofs: selectedRoofs, //直接传入数组
        lang,
    },
});
// 生成URL：/panel_placement?address_id=11842008&roofs=1&roofs=2&lang=en

方法2：手动拼接完整URL（强制保留[1,2]格式） #

如果必须要[1,2]这种格式，直接拼接完整的URL字符串，绕过NextJS的自动编码逻辑：

const targetUrl = `/panel_placement?address_id=11842008&roofs=[${selectedRoofs.join(',')}]&lang=${lang}`;
router.replace(targetUrl);

这样生成的URL就会完全符合你的预期，不会对[]和,进行编码。

方法3：全局配置序列化逻辑（进阶） #

如果需要全局控制查询参数的编码行为，可以在next.config.js里配置相关选项（NextJS 12及以上版本支持）：

module.exports = {
    experimental: {
        serializedQueryParameters: false, //关闭自动序列化，或自定义序列化函数
    },
};

注意：关闭自动序列化可能影响其他参数的编码正确性，建议谨慎使用，或者自定义序列化函数单独处理roofs参数。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai