<!-- COMPONENT MASTER -->
<style>
li { margin-bottom: .5rem; }
img { border: solid 1px #999; margin-right: .5rem; }
li img { display: inline-block; vertical-align: middle; width: 50px; }
a:hover { text-decoration: none; color: #d70; }
</style>
<div>
	<Categories categories='{{apidata}}' />
	<Products products='{{apidata}}' />
	<Product product='{{apidata}}' />
</div>
<script>
this.data.apiBase = 'demo-files/routes-api.php';
this.conditionals = {
    Categories: () => !this.app.activeRoute,
	Products: () => this.app.activeRoute == 'products',
	Product: () => this.app.activeRoute == 'product'
};
this.on('routeChanged', req => {
    if (!req)
        fetch(this.data.apiBase+'?get=cats').then(r => r.json()).then(data => {
            this.data.apidata = data;
            this.rc();
        });
});
this.on('routeFetched', data => {
    this.data.apidata = data;
    this.rc();
});
</script>

<!-- COMPONENT CATEGORIES -->
<style>
a { font-weight: bold; }
</style>
<div>
    <p>Select a product category:</p>
    <ul>
    	<li>
            <a href='#products/{{$index}}'>
                <img src='demo-files/routes-{{$index}}0.jpg' />
                {{$value}}
            </a>
        </li>
    </ul>
</div>
<script>
this.repeaters = {
    li: this.data.categories
};
</script>

<!-- COMPONENT PRODUCTS -->
<div>
    <p><a href='#'>« Back to categories</a></p>
    <p>Select a product:</p>
    <ul>
    	<li>
            <a href='#product/{{$rd:prodCat}}/{{$index}}'>
                <img src='demo-files/routes-{{$rd:prodCat}}{{$index}}.jpg' />
                {{$value}}
            </a>
        </li>
    </ul>
</div>
<script>
this.repeaters = {
    li: this.data.products
};
</script>

<!-- COMPONENT PRODUCT -->
<style>
img { float: left; width: 200px; }
button { border: none; border-radius: 4px; padding: .8rem; background: #d70 ; color: white; font-weight: bold; }
</style>
<div>
<p><a href='#products/{{$rd:prodCat}}'>« Go back</a></p>
    <img src='demo-files/routes-{{$rd:prodCat}}{{$rd:prodId}}.jpg' />
    <p><strong>{{product}}</strong></p>
    <p>Product description here etc Product description here etc Product description here etc Product description here etc </p>
    <p><button>Buy now</button></p>
</div>
<script>

{
    products: {
        type: 'seg',
        parts: ['prodCat'],
        ptn: /products\//,
        dataUri: (data, app) =>
            app.components.master[0].data.apiBase+'?get=products&prodCat='+data.prodCat
    },
    product: {
        type: 'seg',
        parts: ['prodCat', 'prodId'],
        ptn: /product\//,
        dataUri: (data, app) =>
            app.components.master[0].data.apiBase+'?get=product&prodCat='+data.prodCat+'&prodId='+data.prodId
    }
}

//JS object of filter methods (optional)
{}

//JS object of start data for master component
{}

Hi!