Next.js router.push对查询参数进行编码

Question

我试图使用router.push进行重定向以传递查询字符串，但当我试图在参数中传递带有特殊字符的值时，逗号就是对URL的编码。是否可以使用router.push将"，"传递到URL中？

我尝试了很多东西，但我不知道如何让它发挥作用。

router.push({
pathname: router.pathname,
query: { ...router.query, pets: 'cats,dogs'},
})

得到的URL将是myurl?pets=cats%2Cdogs，我希望它是myurl?pets=cats,dogs。

Answer 1

使用URL对象格式作为路径和查询字符串将对查询参数进行内部编码。

为了避免这种情况，您可以将路径和查询字符串作为字符串传递。

router.push(`${router.asPath}?pets=cats,dogs`)

Answer 2

您需要对URI参数进行解码和编码。路由器自动为您编码查询参数：

encodeURIComponent('cats,dogs')
// "cats%2Cdogs"

阅读时需要解码它们：

decodeURIComponent("cats%2Cdogs")
// "cats,dogs"

Answer 3

根据上面的问题，我已经推断出，除了路径名(以段塞形式出现(之外，还有其他一些查询参数。并且您希望将pets=cats,dogs添加到其中。

如果有人想获取路径名，我们可以使用CCD_ 6和其余的旧查询参数可以使用CCD_。

总而言之，人们可以很容易地使用

const subpathAndQuery = window.location.pathname + window.location.search;
router.push(`${subpathAndQuery}&pets=cats,dogs`);

注意：如果pets=cats,dogs是查询参数的第一个键值对。您将不得不使用?而不是&。