[Ionic 7] Vanilla JS Tabs Routing Problem

Ionic Framework
1

Hey guys,

i am currently creating an Ionic 7 + Capacitor project with Vanilla JS and Lit for WebComponents.
I already tried to implement a tab based navigation with the Ionic-Router.
My problem is that i dont understand how to navigate to sub-pages from an individual tab.
I understand that i must define nested routes like they did in the example project (ionic-stencil-conference-app/src/components/app-root/app-root.tsx at 20a33ba2e469399420613daadff356999d0060fb · ionic-team/ionic-stencil-conference-app · GitHub)

Currently nothing is shown when i start the app.
My current approach is:
My app root that is rendered in the index.html

@customElement('app-root')
class AppComponent extends LitElement {
    static styles = [sharedStyle, componentStyle];

    @property({type: String}) headerTitle?: string = "Test"

    @provide({context: courseServiceContext})
    courseService = new CourseService();

    constructor() {
        super();
        console.log("init")
        const port = location.protocol === 'https:' ? 3443 : 3000;
        httpClient.init({
            baseURL: `${location.protocol}//${location.hostname}:${port}`,
            apiPath: 'api',
            filesPath: 'files'
        });
    }

    render() {
        return html`
            <ion-app>
                <ion-router use-hash=false>
                    <ion-route component="tabs-component">
                        <ion-route url="/home" component="tab-home"></ion-route>
                        <ion-route url="/courses" component="tab-courses">
                            <ion-route component="courses-overview"></ion-route>
                        </ion-route>
                        <ion-route url="/books" component="tab-books">
                            <ion-route component="books-overview"></ion-route>
                            <ion-route url="/book" component="book-details"></ion-route>
                        </ion-route>
                        <ion-route url="/lendings" component="tab-lendings">
                            <ion-route component="lendings-overview"></ion-route>
                        </ion-route>
                    </ion-route>
                </ion-router>
            </ion-app>
        `;
    }
}

My custom tabs component:

@customElement('tabs-component')
class TabsComponent extends LitElement {


  protected render() {
    return html`
      <ion-tabs>
        <ion-tab tab="tab-home" component="home-overview"></ion-tab>
        <ion-tab tab="tab-courses">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab tab="tab-books">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab tab="tab-lendings">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="tab-overview">
            <ion-icon name="home-outline"></ion-icon>
            <ion-label>Start</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-courses">
            <ion-icon name="school-outline"></ion-icon>
            <ion-label>Kurse</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-books">
            <ion-icon name="book-outline"></ion-icon>
            <ion-label>Bücher</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-lendings">
            <ion-icon name="library-outline"></ion-icon>
            <ion-label>Leihe</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
        `;
  }
}

The components like home-overview are also WebComponents i defined with Lit.

Do you guys know what could be wrong or what i could try to do?
Thanks in advance!