How to pass multiple queries in next router

Question

I am working in next.js and next-router

I have 2 data parameters that I want to pass

One is entity_id and the other is url_key.

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

Currently I am able to pass one url_key:

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

The URL is appearing just as I wanted like

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

Now I want to also send entity_id along with above url_key but that should not display in URl

Does this answer your question? [Next.js: Router.push with state](https://stackoverflow.com/questions/55182529/next-js-router-push-with-state) — Germa Vinsmoke, Aug 08 '20 at 15:01

felixmosh · Answer 1 · 2020-08-10T06:22:35.813

5

You can pass as many query params as you want, it just using 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}`,
});

For more info, read router docs

edited Aug 10 '20 at 06:22

answered Aug 09 '20 at 16:19

felixmosh

32,615
9
69
88

score 1 · Answer 2 · edited Apr 20 '21 at 16:23

I would suggest you use a query object to pass multiple queries in next router. Using package

import {useRouter} from "next/router";

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

To fetch the data from the query you can use array destructuring of query like this :

   const { query } = useRouter();

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

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

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

Example : Example 1

How to pass multiple queries in next router

2 Answers2