CODEWITHSUNDEEP
typescriptnext.js
Tony Ngomana
Tony Ngomana

Reputation: 67

Unpredictable routing in nextjs when routing from a nested route

i created a folder called dashboard in pages folder which has the following files:

  1. index.tsx
  2. customers.tsx
  3. invoice.tsx
  4. items.tsx

when a user routes to http://localhost:3000/dashboard the index.tsx page is rendered. However when i click a button and route to invoices or customers i get a 404 page when i check the url it routed to http://localhost:3000/customers and http://localhost:3000/invoices instead of http://localhost:3000/dashboard/customers and http://localhost:3000/dashboard/invoices

But when I try and write the full route in the href for customers:

//It will work after refreshing the page
<Link href='dashboard/customers'>
  <a>Customers</a>
</Link>

And when I try to route to any routes from customers to any nested page e.g:

<Link href='dashboard/invoices'>
  <a>Customers</a>
</Link>
// I tend to get a 404 page

When I checked the url it did the following: http://localhost:3000/dashboard/dashboard/invoices instead of http://localhost:3000/dashboard/invoices

Code below for the buttons:

<Link href='/customers'>
  <a>Customers</a>
</Link>

<Link href='/invoices'>
  <a>Invoices</a>
</Link>

Really don't know what I'm doing wrong

Upvotes: 2

Views: 560

Answers (1)

NicholasG04
NicholasG04

Reputation: 361

<Link href='dashboard/invoices' /> is a relative route - href='dashboard/invoices' means to go to /yourCurrentLocation/dashboard/invoices.

For an absolute route, you must prepend with a /. This means it'll always be routed relative to the root directory. Thus, your code should be <Link href='/dashboard/invoices' />.

Upvotes: 3

Related Questions