ziggy-js cannot retrieve the current route correcly while using the same route name for different HTTP methods in Laravel 12

Question

I am new on PHP and currently I'm using Laravel 12 with InertiaJS and React, such toolkit allows me to use ziggy as a route helper and do things like:

import { RouteList } from 'ziggy-js';
type Routes=keyof RouteList;
type NavigationItem = {route_names:Routes[];key:string}
const retrieveActiveRoute = (navigationItems: NavigationItem[] ): string => {
    const current_route = route().current() as keyof RouteList;
    if (!current_route) return '0';
    for (const { route_names, key } of navigationItems) {
        const existentRoute = route_names.includes(current_route);
        if (existentRoute) {
            return key;
        }
    }
    return '0';
};

The routeList created by the ziggy helper can be found by using the command

php artisan route:list

While I can create two routes with different methods, I don't want to give two different names for things that should have the same name, like a route that I want to use both POST and GET methods.

//...previous routes
Route::GET('/invoices',[CustomController::class,'custom_method'])->name('invoices.index');
Route::POST('/invoices',[CustomController::class,'custom_method'])->name('invoices.index');

The problem is that my retrieveActiveRoute function doesn't work when I use the 'invoices.index' name even while using the GET method.

I use this code on typescript like this:


const exampleNavigationItems:NavigationItem[]=[
  {
    route_names:['home'],
    key:'1'
  },
  {
    route_names:['invoices'],
    key:'2'
  },
];
const currentRouteKey = retrieveActiveRoute(exampleNavigationItems)
console.log(currentRouteKey);

This code should log into the console '2' but it gives '0'

Joundill · Accepted Answer · 2025-06-05 04:30:15Z

1

In Laravel, these are actually different routes, so it makes sense that they have different names. The HTTP verb has semantic meaning and is part of how routing works.

Have a look at Laravel's documentation for RESTful resource controllers. If you were to follow the standard Laravel pattern:

Route::GET('/invoices', ..) would be named invoices.index and
Route::POST('/invoices', ..) would be named invoices.store.

It's also worth noting that you named your routes invoices.index, but your typescript is looking for a route just named invoices.

answered Jun 5 at 4:30

Joundill

7,84113 gold badges40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henrique de Paula Rodrigues Jun 26 at 2:23

I see your point here, since I provided the code example using a wrong name like invoices, instead of invoices.index, but imagine that I want to develop a server-side filter but hiding filters from the url. This is common and very easy to do if we are making requests in a default REST API. Just sending a AJAX request solves that problem. But while using InertiaJS, things can be more complicated, since every request that uses views should return a InertiaResponse.

Henrique de Paula Rodrigues Jun 26 at 2:37

I've achieved a solution using the Route::match(['post','get']); I don't know exactly why, but, doing things using this, made the command php artisan route:list show the given route in a single line with multiple methods (post|get), instead of two routes with same name. I think if I just use the same route url and not give another name for the route should work properly as well.

Collectives™ on Stack Overflow

ziggy-js cannot retrieve the current route correcly while using the same route name for different HTTP methods in Laravel 12

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related