show props value in url in next js

Question

I have this scenario When web page load I am getting user location. And on basis of that location show some services like A,B,c etc etc. When user click on service then URL should be go to localhost/3000/Service-name Any helpful link ?

Answer 1

import Router from "next/router";   
....

inside onClick

  router.push(pathname :'/service' query:{service-id:service-name},`/service-${service-name})

the pathname is the filename, the query gets the service-names and the third parameter to the router will display how you want the user to see the URL.

in your case, if the user selects Europe option then URL will be displayed as /service-Europe. this work when you are making use of one component to display for all your routes.

if you want to create a unique page then you can specify the pathname explicitly for each service link.

Programmatically navigate using react router