0

i have a challenge while using next/link while using the [folder] in next.js enter image description here

above is my pages tree. A user is supposed to be sent to the route .types/[type] , type being the dynamic name of the product the user selected. which actually works. on that page above, a user can get details for that particular product by navigating to ./this page, can edit the product details by navigating to ./edit , the index.js will show orders made on that product, while the ./[booking] will show details of the order made for that product. the problem is. the moment the user clicks the link below to navigate through the product; enter image description here

upon clicking the same links again, they'd have changed to "http://localhost:3000/types/[types]/mytype/this" including the "[type]" in the link, making it wrong, there by crushing the page is there anyone with a solution ?? please

Improve this question
5
  • /types/[types]/mytype/this doesn't exist in your folder structure. Did you mean to send to user to /types/[types]/this instead?
    – juliomalves
    Feb 28, 2022 at 18:30
  • exactly, yes, i meant to send the user to /types/[type]/this. this actually works well when the user goes to the path, but upon getting back to where they were initially, eg: /types/[type]/edit, the link would have instead changed to /types/[type]/[type]/edit. meaning, "[type]" automatically adds itself to the path
    – jeho Ntanda
    Mar 1, 2022 at 6:10
  • 2
    Use full paths, rather than relative ones in your links.
    – juliomalves
    Mar 1, 2022 at 9:42
  • @juliomalves, thanks so much, this worked. as an inquiry, why where the relatives not working? i just want to understand. Also is it okay if i can always tag you if i have any other inquiries ?
    – jeho Ntanda
    Mar 1, 2022 at 10:54
  • 1
    Because relative links are relative, they'll depend on which page you're in. It's recommend to always use full paths.
    – juliomalves
    Mar 1, 2022 at 10:59

1 Answer 1

Reset to default
1

Julio is correct, you need to use the full paths. A site I am working on gave me a lot of issues with dynamic routing . Ultimately, this is how my path ended up looking like:

const ROUTE_CNC_PARTS = '/CNCParts/[id]'
const ROUTE_CNC_CONFIGS = '/CNCParts/[id]/[config]'
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.