在Next.js中使用查询参数创建url
在Next.js中使用查询参数创建url
提问于 2020-11-02 01:37:59
我想用下面的方法从query params创建一个url：
router.push(
{
pathname: '/cars',
query: colors + type + price,
},
undefined,
{
shallow: true,
},
);
const colors = ['red', 'blue', 'yellow']; //the arrays could contain many others values
const type = ['offroad', 'sport'];
const price = 'hight' //this is a string
我想实现，当我点击触发router.push的按钮时，下一步：/cars?color=red,yellow,blue&type=offroad,sport&price=hight
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-11-02 18:23:26
您可以简单地这样做：
const router = useRouter();
router.push(
{
pathname: '/cars',
query: {
colors,
type,
price,
},
undefined,
{
shallow: true,
},)；
根据Next/Router类型，查询类型为ParsedUrlQuery类型，相当于
interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }也就是说，next/router能够同时解析字符串和字符串数组
Stack Overflow用户
发布于 2021-10-04 13:58:49
如果您有一个动态路由，并且希望能够普遍使用此路由，例如，每个页面上的某个链接(在页眉中)，您可以通过提供所有当前可用的路由参数并添加或替换其他或现有的路由参数来实现此目的。
// ...
const router = useRouter();
// ...
<Link
href={{
pathname: router.pathname,
query: { ...router.query, colors, type, price },
}}
passHref
shallow
replace
></Link>Stack Overflow用户
发布于 2020-11-02 02:03:21
https://nextjs.org/docs/api-reference/next/router#with-url-object
你试试这个
router.push({
pathname: '/cars',
query: {
colors: colors.join(","),
types: types.join(",")
},
}) 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64634889
复制相关文章
相似问题
腾讯云开发者
