Having some issues with page routing using Link
Answered
Oak apple gall wasp posted this in #help-forum
Oak apple gall waspOP
Hey there! As indicated in the title, I'm having some issues with page routing using Link, I was going to try and implement a nested page which I assumed would be a nested directory in the app structure with a corresponding page.js as would logically follow from the basic case.
I tried doing this, and observed that this impacts the routing to other links which are not nested eg
I have a link which is href="about/"
and another for a minimal example where I route to "products/example/"
the path to products/example works fine, but after that from the products/example page now if I try to navigate via the navbar to the about/ page it will now try to point to products/about instead of just about/ and thus I will get a 404 as that page does not exist. What is the correct way to do this sort of routing?
Also, I am going to be using hashtag indicators to snap to ids for certain links and the base case eg about/#aboutus would work, but products/example/#example does not and doesn't even display that portion as normal when mousing over the hyperlink.
Thanks! â¤ï¸
I tried doing this, and observed that this impacts the routing to other links which are not nested eg
I have a link which is href="about/"
and another for a minimal example where I route to "products/example/"
the path to products/example works fine, but after that from the products/example page now if I try to navigate via the navbar to the about/ page it will now try to point to products/about instead of just about/ and thus I will get a 404 as that page does not exist. What is the correct way to do this sort of routing?
Also, I am going to be using hashtag indicators to snap to ids for certain links and the base case eg about/#aboutus would work, but products/example/#example does not and doesn't even display that portion as normal when mousing over the hyperlink.
Thanks! â¤ï¸
Answered by Oak apple gall wasp
I think I've figured it out, it was because I didn't have leading slashes on the paths making them relative paths.
However, I'm still observing unexpected behavior with some of the links.
I have a RadixUI navigation menu which has a dropdown which has two options which map to products/example and products/otherexample but when I mouse over some of the relevant options it has the wrong path mixing up with its counterpart. Why would this happen? I checked my code and they are definitely pointed to the correct locations.
Additionally, that /#position issue is still occuring with the nested paths as mentioned
However, I'm still observing unexpected behavior with some of the links.
I have a RadixUI navigation menu which has a dropdown which has two options which map to products/example and products/otherexample but when I mouse over some of the relevant options it has the wrong path mixing up with its counterpart. Why would this happen? I checked my code and they are definitely pointed to the correct locations.
Additionally, that /#position issue is still occuring with the nested paths as mentioned
6 Replies
Oak apple gall waspOP
I think I've figured it out, it was because I didn't have leading slashes on the paths making them relative paths.
However, I'm still observing unexpected behavior with some of the links.
I have a RadixUI navigation menu which has a dropdown which has two options which map to products/example and products/otherexample but when I mouse over some of the relevant options it has the wrong path mixing up with its counterpart. Why would this happen? I checked my code and they are definitely pointed to the correct locations.
Additionally, that /#position issue is still occuring with the nested paths as mentioned
However, I'm still observing unexpected behavior with some of the links.
I have a RadixUI navigation menu which has a dropdown which has two options which map to products/example and products/otherexample but when I mouse over some of the relevant options it has the wrong path mixing up with its counterpart. Why would this happen? I checked my code and they are definitely pointed to the correct locations.
Additionally, that /#position issue is still occuring with the nested paths as mentioned
Answer
Oak apple gall waspOP
Another question, how can I offset the position to scroll to? I have a 72 pixel padding on the elements because I have a CSS locked navbar at the top which means I have to offset it by the full size of that bar, and I believe that offset is causing the snapping to id position to be off by that same amount 72px so how can I correct this?
resolved that last bit, used scrollMarginTop CSS attribute and set it to 72px
Oak apple gall waspOP
Yep, I had figured that out and I think I've solved everything in here myself at this point, thank you! 🙂
I tried closing the ticket haha