Can't find a way to handle navigation within a Dynamic route
Unanswered
Macao paper wasp posted this in #help-forum
Macao paper waspOP
Hello everyone,
I hope you're all doing well. I have a question that might be considered basic, but I couldn't find the answer in the documentation.
I'm wondering how to set up routing within a dynamic route. For example, I have a route for users, and I want to create a service page for each user. How can I implement navigation for a URL like /[userName]/services?
I attempted to use parameters, but it resulted in a redirection to [userName]/[userName]/services. To provide some context, I'm building a personal website for the students at my company. The goal is to offer multiple services for each user. Unfortunately, when I try to switch between different services, I encounter the issues I mentioned earlier.
I also experimented with both the "replace" property on the Link element and the "router.replace" method, but neither of them seemed to work.
I hope you're all doing well. I have a question that might be considered basic, but I couldn't find the answer in the documentation.
I'm wondering how to set up routing within a dynamic route. For example, I have a route for users, and I want to create a service page for each user. How can I implement navigation for a URL like /[userName]/services?
I attempted to use parameters, but it resulted in a redirection to [userName]/[userName]/services. To provide some context, I'm building a personal website for the students at my company. The goal is to offer multiple services for each user. Unfortunately, when I try to switch between different services, I encounter the issues I mentioned earlier.
I also experimented with both the "replace" property on the Link element and the "router.replace" method, but neither of them seemed to work.
15 Replies
Is it just a button? Since
Should work
Import Link from ‘next/link’
<Link href=“/someUser/servicesâ€>Services</Link>Should work
Macao paper waspOP
I tried it pretty much this exact way and it didn't work
I'll sent you a screencap
The navbar component gets the userUrl from the layout.tsx page
The navigation item uses the userUrl and applies it. Currently I'm trying to use router.replace. But I've also tried the href earlier
if I'm on the first page of the route it works just fine
But If I try to navigate between secondary pages it will add the userUrl twice
@Macao paper wasp The navigation item uses the userUrl and applies it. Currently I'm trying to use router.replace. But I've also tried the href earlier
This would also work with a <Link/> instead of a <Button/>
But try putting a / before the base url. (I'm assuming baseUrl is the username and the item.href is the car_dealerships?)
But try putting a / before the base url. (I'm assuming baseUrl is the username and the item.href is the car_dealerships?)
Macao paper waspOP
Just Tried. I seems to work just fine. Thanks dude
What was happening was this
/username/services
Then you try and go to say 'username/account'
it result in '/username/username/account'
But if you try and go to '/username/account' with a leading /
it would then go to /username/account
/username/services
Then you try and go to say 'username/account'
it result in '/username/username/account'
But if you try and go to '/username/account' with a leading /
it would then go to /username/account
Since it tries to only change the last part of your route unless you specify the leading / then it wipes the whole route
make sense?
Macao paper waspOP
It does. I didn't know about that
@Macao paper wasp It does. I didn't know about that
Yeah it was something I learned after trial in error in React years ago haha.
Goodluck with your app.
Goodluck with your app.
Macao paper waspOP
Thanks man 