Ziggy generates URL with a double leading slash

[tmannherz]

Ziggy version

v2.1.0

Laravel version

v10.48.4

Description

We have a route whose sole parameter comes from the DB:

Route::get('{catalog_uri}', fn() => view('pdp'))
    ->where('catalog_uri', '^/p/.+$')
    ->name('catalog.pdp');

It's admittedly non-standard as you would usually move /p/ as part of the route, but this prefix is part of the data provided by the catalog.

In Laravel, creating a URL to this route works as you would expect:

route('catalog.pdp', ['catalog_uri' => '/p/test']); // http://example.com/p/test

Yet if generated by Ziggy, a URL with a double-slash is generated:

route('catalog.pdp', { catalog_uri: '/p/test' }); // http://example.com//p/test

Ziggy call and context

We use Ziggy in Vue, so its route method is called like:

<a
    :href="
        route('catalog.pdp', {
            catalog_uri: listing.catalog_uri,
        })
    "
    class="btn-black-small px-6 py-2 text-sm"
    >Link to catalog</a
>

Ziggy configuration

{
    "url": "https:\/\/example.com",
    "port": null,
    "defaults": {},
    "routes": {
        "catalog.pdp": {
            "uri": "{catalog_uri}",
            "methods": ["GET", "HEAD"],
            "wheres": {
                "catalog_uri": "^\/p\/.+$"
            },
            "domain": "example.com",
            "parameters": ["catalog_uri"]
        }
    }
}

Route definition

Route::get('{catalog_uri}', fn() => view('pdp'))
    ->where('catalog_uri', '^/p/.+$')
    ->name('catalog.pdp');

[bakerkretzmar]

What's your actual route path? Is it at the root of your app's domain, so the entire URI is literally {catalog_uri}?

I'm adding tests for this to Ziggy and testing it in a real app too and I actually can't reproduce your exact examples. Laravel and Ziggy are behaving the same way for me, but they both behave differently if the route parameter is right at the root of the domain:

Route::get('{catalog_uri}', fn() => '')->where('catalog_uri', '^/p/.+$')->name('catalog1');

Route::get('catalog/{catalog_uri}', fn() => '')->where('catalog_uri', '^/p/.+$')->name('catalog2');

Both Laravel and Ziggy produce the same output for these:

route('catalog1', '/p/test'): http://example.com/p/test

route('catalog2', '/p/test'): http://example.com/catalog//p/test

[tmannherz]

@bakerkretzmar The catalog routes are bound to a different domain, which is why these routes existing at all, so we can generate them correctly with the alternate domain.

Route::domain('catalog.example.com')->group(function () {
    Route::get('{catalog_uri}', fn() => view('pdp'))
        ->where('catalog_uri', '^/p/.+$')
        ->name('pdp');
});

Does that answer your question?

[bakerkretzmar]

Yeah it does, thanks. I can't reproduce this at all then. When I add a route with the exact configuration you shared to Ziggy's tests or to one of my own apps, Ziggy's route('catalog.pdp', { catalog_uri: '/p/test' }) returns http://example.com/p/test as expected. Tried on Laravel 10 and 11. Can you reproduce it in another app or a fresh install?

[tmannherz]

@bakerkretzmar apologies...in my attempt to simply this for the ticket I actually removed the component that causes the issue. You're right that the scenario above works as expected. I'm able to reproduce it with this slightly different route setup:

// catalog.php
Route::domain('{storefront}.example.com')->name('test.')->group(function () {
    Route::get('{catalog_uri}', fn() => view('pdp'))
        ->where('catalog_uri', '^/p/.+$')
        ->name('pdp');
});

Calling it like this in Vue:

<pre>
test pdp: {{
    route('catalog.test.pdp', {
        storefront: 'me',
        catalog_uri: '/p/test',
    })
}}
</pre>

Yields test pdp: https://me.example.com//p/test

For context, we run a multi-tenant site with multiple storefronts, each with its own subdomain.

[bakerkretzmar]

Thanks, I can reproduce that. Will investigate!

[bakerkretzmar]

I'll tag another release for this shortly. Thanks for your help @tmannherz!