How to mask dynamic url in Next13( with app router)
Unanswered
Himalayan posted this in #help-forum
HimalayanOP
I need to mask dynamic url for example part with /about/[id] -> to /about/some-readable-text
36 Replies
you dont want people in the browser to see? or..
@alfon wdym mark dynamic url?
HimalayanOP
i want replace dynamic part of url like /about/12 ---> /about/title, i tried with
<Link href='/about/${id}' as='/about/title' /> but link equal to href only on prefetch where params = { slug: id}, when i click on it params change to params={slug: title} i want people to see readable title instead id
well you can just use
/about/[titleid]/change your folder name from
[id] to [title]then your
params will have titleconsole.log(params.title) // title@alfon well you can just use `/about/[titleid]/`
HimalayanOP
i think it's not my case, now i have structure like this
in a slug page i need have id to call api request for data but also i want to keep url as
but now i have
`about
page.tsx
[slug]
page.tsx`
in a slug page i need have id to call api request for data but also i want to keep url as
/about/some-dynamic-textbut now i have
/about/15HimalayanOP
as i said <Link href={'/about/${id}'} as={'/about/${title_text}'} />
ohh you want to reuse
/about/some-dynamic-text/ for API routes?what
well you can just handle it in the
[slug]/page.tsx to detect if its a string or a numbertry
parseInt(params.slug) and catch, if its an int do A, if its a string do BHimalayanOP
I think it's a little different from what I want: i just need to change url in browser withoud rerender but still needthe id
@Himalayan i want people to see readable title instead id
if you want people to see readable title instead of id
why not just put
<Link href='/about/${id}'>{title}</Link>
why not just put
<Link href='/about/${id}'>{title}</Link>
so that it display like
some-dynamic-text -> on click, go to /about/15
some-dynamic-text -> on click, go to /about/15
@alfon if you want people to see readable title instead of id
why not just put
<Link href='/about/${id}'>{title}</Link>
HimalayanOP
yeah but they will redirect to page where url of page will smth about/3
but i need to change url in slug page not in parent
ah so you also want it to display /about/some-dynamic-text AFTER clicking?
HimalayanOP
yeah
i dont think thats supported in the new app dir, its undocumented :/
perhaps you can make do with rewrite() on middleware.ts
HimalayanOP
yes, thats why i'm here
something like this
@alfon perhaps you can make do with rewrite() on middleware.ts
HimalayanOP
hm, looks appropriate
can i pass dynamic param here? in request
good point :/
im not sure you can and if you can it would be expensive/costly for middleware
since you need to find out what 1, whats 2, whats 3 etc
HimalayanOP
ok, i will try and come back with result