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 — Germa Vinsmoke
– Germa Vinsmoke, Commented Aug 8, 2020 at 15:01

felixmosh · Accepted Answer · 2020-08-10 06:22:35Z

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, 2020 at 6:22

answered Aug 9, 2020 at 16:19

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suraj Rao · Accepted Answer · 2021-04-20 16:23:31Z

1

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

edited Apr 20, 2021 at 16:23

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Apr 20, 2021 at 16:14

Force Bolt

1,23111 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to pass multiple queries in next router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related