Menu
I'm using the default dynamic routing technique of nextjs in my project which is based on the folder structure. I have a route which is:
pages/[language]/location/[location_id]
Now I'm coming across a use case where I need the above route exactly the same except the last parameter of [location_id], I need [route_id] here.
When I created a file [route_id].js for this new route, I'm facing this error:
throw new Error(`You cannot use different slug names for the same dynamic path ('${previousSlug}' !== '${nextSlug}').`);
I'm aware of the error and the problem about why it's showing me this after doing some research but I'm unable to understand how I can solve this problem. I just want a solution how I can implement these two routes in my app:
Route 1: pages/[language]/location/[location_id]
Route 2: pages/[language]/location/[route_id]
PS: I've already studied this: https://github.com/zeit/next.js/issues/9081
751
The companion life-cycle method getStaticPaths of getStaticProps lets us use the data we have at build-time to specify which dynamic routes (like /pages/blog/[slug] ) we want to generate statically.
Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns.
The easiest way to get query parameters from a URL in Next. js is by calling the UseRouter() method. The UseRouter() method gives the developer a router object that has a property called query that contains a dictionary of the query parameters for a given URL. There are 3 scenarios where Next.
The two routes you have provided are exactly equivalent and are not at all different. Therefore, they will be handled by a single page. There is no example of two urls that will route to different nextjs pages for the above two routes.
Anything written in [] will handle any type of value e.g 1 or 2 or any other value for that matter.
You can not make two pages to handle same request because there is no way for next or anyone else for that matter to know whether you are using route_id or location_id because these are both variables that are representing any value.
If you want to differentitate between them, either create a new route with
/route/[route_id]
instead of
/location/[location_id], or use queryparams e.g
pages/[language]/location?locationid=[location_id]
And
pages/[language]/location?routeid=[route_id]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
