[Ionic 7] Vanilla JS Tabs Routing Problem

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

class AppComponent extends LitElement {
    static styles = [sharedStyle, componentStyle];

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

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

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

    render() {
        return html`
                <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 url="/books" component="tab-books">
                            <ion-route component="books-overview"></ion-route>
                            <ion-route url="/book" component="book-details"></ion-route>
                        <ion-route url="/lendings" component="tab-lendings">
                            <ion-route component="lendings-overview"></ion-route>

My custom tabs component:

class TabsComponent extends LitElement {

  protected render() {
    return html`
        <ion-tab tab="tab-home" component="home-overview"></ion-tab>
        <ion-tab tab="tab-courses">
        <ion-tab tab="tab-books">
        <ion-tab tab="tab-lendings">
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="tab-overview">
            <ion-icon name="home-outline"></ion-icon>
          <ion-tab-button tab="tab-courses">
            <ion-icon name="school-outline"></ion-icon>
          <ion-tab-button tab="tab-books">
            <ion-icon name="book-outline"></ion-icon>
          <ion-tab-button tab="tab-lendings">
            <ion-icon name="library-outline"></ion-icon>

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!