CODEWITHSUNDEEP
reactjsreact-routernext.jsnext-router
Ryuk
Ryuk

Reputation: 372

How to pass multiple queries in next router

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

Upvotes: 2

Views: 7491

Answers (2)

Force Bolt
Force Bolt

Reputation: 1221

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 : Example1

Upvotes: 1

felixmosh
felixmosh

Reputation: 35583

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

Upvotes: 5

Related Questions