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

Question

我在 next.js 和 next-router 工作

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

一个是 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

现在我还想发送 entity_id 以及上面的 url_key 但这不应该显示在 URl

Answer 1

您可以根据需要传递任意数量的查询参数，只需使用查询字符串。

// 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}`,
});

有关更多信息，请阅读路由器文档

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);

示例：示例1