Laravel Inertia Ziggy Link Routing Issue

Question

I'm currently having a problem in my routing. Here's the scenario:

Inertia is working fine when there's no id query.

But after navigating to edit and I want to click any of the navigation links like clicking the Dashboard link, it throws a 404 code saying the page does not exist. Simply because instead of removing the /category/{id}, it adds dashboard at the end instead of removing the query.

Is there a way to fix this by not violating the inertia routing?

Here's the code:

Authenticated Layout

const navigation = [
  { name: 'Dashboard', href: 'dashboard', current: false },
  { name: 'Category', href: 'category', current: false },
  ]

 <nav class="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
        <Link v-for="item in navigation" :key="item.name" 
        :href="item.href" :class="[item.current ? 'bg-gray-100 
         text-gray-900' : 'text-gray-900 hover:bg-gray-50 
         hover:text-gray-900', 'rounded-md py-2 px-3 inline-flex 
         items-center text-sm font-medium']" :aria- 
         current="item.current ? 'page' : undefined">{{ item.name 
         }}</Link>
 </nav>

Answer 1

Solved it. Just needed to add "/" to the href navigation object.

const navigation = [
   { name: 'Dashboard', href: '/dashboard', current: false },
   { name: 'Category', href: '/category', current: false },
]