如何在下一个路由器中传递多个查询

Question

我在next.js和next-router工作

我有两个要传递的数据参数

一个是entity_id，另一个是url_key。

data={
    entity_id: 5,
    url_key: 'canada/ontario/store_five'
}

目前我可以传递一个url_key：

 Router.push('/store?url_key=' + marker.url_key, `/store/${marker.url_key}`)

URL就像我想要的那样出现了

http://BaseUrl/store/canada/ontario/store_five

现在我还想发送与上述url_key一起的entity_id，但这不应该在URl中显示

Answer 1

您可以传递任意多个查询参数，只需使用query-string即可。

// using urls
Router.push(
  `/store?url_key=${marker.url_key}&entity_id=${marker.entity_id}`,
  `/store/${marker.url_key}`
);

// using object
Router.push({
  pathname: '/store',
  query: { url_key: marker.url_key, entity_id: marker.entity_id },
  asPath: `/store/${marker.url_key}`,
});

有关更多信息，请阅读router docs

Answer 2

我建议你在下一个路由器中使用一个查询对象来传递多个查询。使用包

import {useRouter} from "next/router";

 const router=useRouter();
 router.push({
               
 pathname:'/store',
 
query:{entity_id :"2221ACBD",url_key:"URL KEY"},
            })

要从查询中获取数据，您可以使用查询的数组解构，如下所示：

   const { query } = useRouter();

    console.log("query::",query);

    console.log("entity key:-",query.entity_id);

    console.log("url_key:-",query.url_key);

示例：Example1