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

juliomalves
  • 42,130
  • 20
  • 150
  • 146
jeho Ntanda
  • 53
  • 1
  • 8
  • `/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 '22 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 01 '22 at 06:10
  • 2
    Use full paths, rather than relative ones in your links. – juliomalves Mar 01 '22 at 09: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 01 '22 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 01 '22 at 10:59

1 Answers1

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]'
Ish Suarez
  • 32
  • 3