Dynamic URL with name instead of ID
Unanswered
Singapura posted this in #help-forum
SingapuraOP
There is an List Page and Detail Page, where list of card is there in the list page and when I Click on card I need to send name of url like /homes/van after that then I go to detail page it should fetch by id instead of name the Detail Page URL should be /homes/van, please anyone can help this use I'm dynamic routing over here JSON Data=[{title:"vann",url:"/van",id:1},{title:"Souls",url:"/soul",id:2}]
27 Replies
@Singapura hi, can you share an image of your folder structure? Your question is confusing. In
/homes/van is van not the ID?SingapuraOP
/homes is listing page and /homes/[propertyname] is detail page @rex1410
so instead of
[propertyPage] you should use [id] right?Or do you want both of them to be there?
@Singapura
SingapuraOP
I need propertyname in url instead of id @rex1410
@Singapura I need propertyname in url instead of id <@689359120285171720>
do you need id in the page's code?
SingapuraOP
yes
it should fetch the api by id @rex1410
@Singapura it should fetch the api by id <@689359120285171720>
why don't you put the ID as a query paramter?
/homes/[propertyName]?id=1something like that
SingapuraOP
because client need only name not id as a url @rex1410
@Singapura fyi you can simply reply to rex's message and it will ping them
no need to manually edit message to ping
@Singapura are you using pages router or app router?
In app router, the concept of
https://stackoverflow.com/a/77786356/13252221
https://arc.net/l/quote/cohompea
In pages router you can use URL Masking like this:
https://stackoverflow.com/a/74950563
If you are in App Router, then ig one way would be to use query parameters and then use some algorithm to obscure the real ID, maybe use some crypto algorithm to hash it or something. But it has to be there if the data has to be used
URL Masking has been removed."https://stackoverflow.com/a/77786356/13252221
https://arc.net/l/quote/cohompea
In pages router you can use URL Masking like this:
https://stackoverflow.com/a/74950563
If you are in App Router, then ig one way would be to use query parameters and then use some algorithm to obscure the real ID, maybe use some crypto algorithm to hash it or something. But it has to be there if the data has to be used
The 2nd link is not a wrong link, it is a Arc Browser feature to quote the exact part of the text from NextJS docs
@Singapura another thing you can do, https://nextjs-forum.com/post/1240156753182724136#message-1240157276866740266
basically create a context around your
basically create a context around your
layout.tsx and then use the data in this state on your individual pagesSingapuraOP
Is it optimize way to do it what do you say?
These are the only ways I am aware of on how to do it, you can wait for someone else to reply or try these methods
SingapuraOP
okay
Thanks buddy
no worries
American Crow
If you have a complete list of the the JSON data, you could simply use the name as dynamic param
But that requires to have a full list (mapping) ready and that there are no duplicates in the data
homes/[name] and introduce a mapping/lookup function to look up the corresponding Id. e.g.const data = [
{ title: "vann", url: "/van", id: 1 },
{ title: "Souls", url: "/soul", id: 2 },
]
export default function Test3Page({ params }) {
// fake param
params = "van"
// add slash to match url
params = `/${params}`
// lookup id from params
const item = data.find((item) => item.url === params)
if (!item) {
throw new Error("No item found")
}
// await db.findone({ id: item.id })
return <div>id: {item.id}</div>
}But that requires to have a full list (mapping) ready and that there are no duplicates in the data