Content in tab does not show in Shopware 6

Question

I have added a custom tab on my module’s details page, however, the tab is rendered but the content for the tab isn’t showing. There isn’t any error in the console log as well.

index.js

import './page/wt-shopfinder-list';
import './page/wt-shopfinder-detail';

import './view/wt-shopfinder-detail-base';
import './view/wt-shopfinder-detail-review';

const { Module } = Shopware;

Module.register('example-shopfinder', {
type: 'plugin',
name: 'ExampleShopFinder',
title: 'example-shopfinder.general.mainMenuItemGeneral',
description: 'example-shopfinder.general.descriptionTextModule',
version: '1.0.0',
targetVersion: '1.0.0',
color: '#9AA8B5',
icon: 'default-shopping-paper-bag',
entity:'wt_shop_finder',
routes: {
    index: {
        components: {
            default: "wt-shopfinder-list"
        },
        path: 'index',
        
    },
    detail: {
        component: 'wt-shopfinder-detail',
        path: 'detail/:id',
        redirect: {
            name: 'example.shopfinder.detail.base',
        },
        children: {
            base: {
                component: 'wt-shopfinder-detail-base',
                path: 'base',
                meta: {
                    parentPath: 'example.shopfinder.index'
                },
            },
            review: {
                component: 'wt-shopfinder-detail-review',
                path: 'review',
                meta: {
                    parentPath: 'example.shopfinder.index'
                },
            },
        },
        meta: {
            appSystem: {
                view: 'detail',
            },
        },
        props: {
            default(route) {
                return {
                    shopFinderId: route.params.id,
                };
            },
        },
    }
},

navigation: [{
    id: 'wt-shopfinder',
    label: 'example-shopfinder.menu.mainMenuItemGeneral',
    color: '#ff3d58',
    icon: 'default-shopping-paper-bag-product',
    path: 'example.shopfinder.index',
    parent: "sw-marketing",
    position: 100,
}],
});

wt-shopfinder-detail/wt-shopfinder-detail-html.twig

<sw-tabs
            class="wt_shopfinder-detail-page__tabs"
            position-identifier="wt-shopfinder-detail"
        >
            {% block wt_shopfinder_detail_content_tabs_general %}
            <sw-tabs-item
                :route="generalRoute"
                :title="$tc('sw-customer.detail.tabGeneral')"
                :disabled="false"
            >
                {{ $tc('sw-promotion-v2.detail.tabs.tabGeneral') }}
            </sw-tabs-item>
            {% endblock %}
            {% block wt_shopfinder_detail_content_tabs_general2 %}
            <sw-tabs-item
                :route="reviewRoute"
                :title="$tc('sw-customer.detail.tabGeneral')"
                :disabled="false"
            >
                Review
            </sw-tabs-item>
            {% endblock %}
        </sw-tabs>

wt-shopfinder-detail/index.js

//Sharing only the url part for tab navigation
generalRoute() {
        console.log("ID = "+this.shopFinderId);
        return {
            name: 'webbytroops.shopfinder.detail.base',
            params: { id: this.shopFinderId },
        };
    },

wt-shopfinder-detail-base/index.js

import template from './wt-shopfinder-detail-base.html.twig';

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('wt-shopfinder-detail-base', {
    template,
    
    inject: ['repositoryFactory'],
    
    metaInfo() {
        return {
            title: "Custom"
        };
    }    
});

wt-shopfinder-detail-base/wt-shopfinder-detail-base.html.twig

<sw-card title="Custom">
    Hello world!
</sw-card>

Answer 1

The correct pattern for the route would be {moduleName}.{routeName}.{childName} and in the module name dashes are replaced by dots. So the correct route in your case should be example.shopfinder.detail.base.

Also, unless you omitted it, you're missing the router-view tag after the sw-tabs component.

<sw-container>
    <sw-tabs>
        ...
    </sw-tabs>

    <router-view />
</sw-container>