Trim slashes between origin and optional first param

src/js/Route.js

@@ -26,13 +26,23 @@ export default class Route {
      * @return {String} Route template.
      */
     get template() {
+        return `${this.origin}/${this.definition.uri}`.replace(/\/+$/, '');
+    }
+
+    /**
+     * Get a template of the origin for this route.
+     *
+     * @example
+     * https://{team}.ziggy.dev/
+     *
+     * @return {String} Route origin template.
+     */
+    get origin() {
         // If  we're building just a path there's no origin, otherwise: if this route has a
         // domain configured we construct the origin with that, if not we use the app URL
-        const origin = !this.config.absolute ? '' : this.definition.domain
+        return !this.config.absolute ? '' : this.definition.domain
             ? `${this.config.url.match(/^\w+:\/\//)[0]}${this.definition.domain}${this.config.port ? `:${this.config.port}` : ''}`
             : this.config.url;
-
-        return `${origin}/${this.definition.uri}`.replace(/\/+$/, '');
     }
 
     /**
@@ -101,6 +111,6 @@ export default class Route {
             }
 
             return encodeURIComponent(params[segment] ?? '');
-        }).replace(/\/+$/, '');
+        }).replace(`${this.origin}//`, `${this.origin}/`).replace(/\/+$/, '');
     }
 }

tests/Unit/ZiggyTest.php

@@ -612,4 +612,19 @@ public function can_cache_compiled_route_list_internally_on_repeated_instantiati
 
         $this->assertSame($routes, (new Ziggy)->toArray()['routes']);
     }
+
+    /** @test */
+    public function optional_params_inside_path()
+    {
+        app('router')->get('{country?}/test/{language?}/products/{id}', $this->noop())->name('products.show');
+        app('router')->getRoutes()->refreshNameLookups();
+
+        $this->assertSame('http://ziggy.dev/ca/test/fr/products/1', route('products.show', ['country' => 'ca', 'language' => 'fr', 'id' => 1]));
+        // Optional param in the middle of a path
+        $this->assertSame('http://ziggy.dev/ca/test//products/1', route('products.show', ['country' => 'ca', 'id' => 1]));
+        // Optional param at the beginning of a path
+        $this->assertSame('http://ziggy.dev/test/fr/products/1', route('products.show', ['language' => 'fr', 'id' => 1]));
+        // Both
+        $this->assertSame('http://ziggy.dev/test//products/1', route('products.show', ['id' => 1]));
+    }
 }

tests/js/route.test.js

@@ -383,6 +383,15 @@ describe('route()', () => {
         same(route('pages.optional', null), 'https://ziggy.dev/optionalpage');
     });
 
+    test('missing optional parameter in first path segment', () => {
+        same(route('products.show', { country: 'ca', language: 'fr', id: 1 }), 'https://ziggy.dev/ca/fr/products/1');
+        // These URLs aren't valid but this matches the behavior of Laravel's PHP `route()` helper
+        same(route('products.show', { country: 'ca', id: 1 }), 'https://ziggy.dev/ca//products/1');
+        same(route('products.show', { id: 1 }), 'https://ziggy.dev//products/1');
+        // First param is handled correctly
+        same(route('products.show', { language: 'fr', id: 1 }), 'https://ziggy.dev/fr/products/1');
+    });
+
     test('can error if a route name doesn’t exist', () => {
         throws(() => route('unknown-route'), /Ziggy error: route 'unknown-route' is not in the route list\./);
     });