I recently set up a directory named dashboard within the pages folder, and it contains the following files:
- index.tsx
- customers.tsx
- invoice.tsx
- items.tsx
When a user navigates to http://localhost:3000/dashboard, the index.tsx page is displayed. However, when I try to access the invoices or customers pages by clicking on buttons, I encounter a 404 error. Upon inspecting the URL, I noticed that it directs to http://localhost:3000/customers and http://localhost:3000/invoices instead of
http://localhost:3000/dashboard/customershttp://localhost:3000/dashboard/invoicesDespite this, including the full route in the href for customers seems to work after refreshing the page:
//This snippet works after page refresh
<Link href='dashboard/customers'>
<a>Customers</a>
</Link>
However, when attempting to navigate from customers to any nested page, such as invoices, using the following code results in a 404 error:
<Link href='dashboard/invoices'>
<a>Customers</a>
</Link>
// I consistently get a 404 page
Upon investigation, I discovered that the URL was being modified to
http://localhost:3000/dashboard/dashboard/invoiceshttp://localhost:3000/dashboard/invoicesHere's the code for the buttons:
<Link href='/customers'>
<a>Customers</a>
</Link>
<Link href='/invoices'>
<a>Invoices</a>
</Link>
Unfortunately, I am unsure of what mistake I might be making. Any guidance would be greatly appreciated.