How should I fill in the path parameter for Nested Routes in @lit-labs/router?

[ouweiya]

I want the subcomponent to display <h1>BBB</h1> when navigating to BB, but I don't know where my code is going wrong. Could you help me figure it out?

Code example
https://lit.dev/playground/#sample=examples%2Fhello-world&gist=f70f35ea578695b18a0af498ae202ea4

[AndrewJakubowicz]

The following diff will fix the sample:

@@ -7,7 +7,6 @@
   private _router = new Router(this, [
     { path: '/', render: () => html`<h1>Home</h1>` },
     { path: '/a', render: () => html`<h1>AAA</h1>` },
-    { path: '/b', render: () => html`<my-one></my-one>` },
     { path: '/b/*', render: () => html`<my-one></my-one>` },
   ]);
 
@@ -17,7 +16,7 @@
         <p class="text-red-800 bg-red-200 p-4">
           <a href="/">Home</a>
           <a href="/a">AA</a>
-          <a href="/b">BB</a>
+          <a href="/b/">BB</a>
         </p>
         ${this._router.outlet()}
       </div>
@@ -28,7 +27,7 @@
 @customElement('my-one')
 class MyOne extends LitElement {
   private _router = new Routes(this, [
-    { path: '/', render: () => html`<h1>BBB</h1>` },
+    { path: '', render: () => html`<h1>BBB</h1>` },
     { path: 'one', render: () => html`<h3>b-one</h3>` },
     { path: 'two', render: () => html`<h3>b-two</h3>` },
 
@@ -37,7 +36,7 @@
   render() {
     return html`
       <nav>
-        <a href="/b">b-home</a>
+        <a href="/b/">b-home</a>
         <a href="/b/one">one</a>
         <a href="/b/two">two</a>
       </nav>

These changes fix your issue because lit-labs/router uses URLPattern to parse the url and forward nested routes.

The URL /b/ will match the parent route /b/*, and then forward an empty string path to the child.

This can be tested with:

const pattern = new URLPattern({ pathname: "/b/*" })
console.log(pattern.exec({pathname: "/b"})) // Prints: null
console.log(pattern.exec({pathname: "/b/"}).pathname.groups) // Prints: {0: ''}