Why Routable Tabs can't find tab-2 or tab-3 content

Checked answers to similar from the past year and don’t see the solution.

tab-1 is inline page content and that works. Pressing on the second tab which is a standard url page/path gets the 404 page. Pressing on the third tab which is a componentUrl gets the 404 as well.

v8.3.4 and my app is in /app/ on the domain rather than root. I tried BrowserHistoryRoot but did not see an affect. You can try the tabs at [https://fling.photo/app/](Fling Photo)

made a tabs.html file

<div class="page">
    <div class="navbar navbar-bottom">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Routable Tabs</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-top">
      <div class="toolbar-inner">
        <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
        <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
        <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
        <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
      </div>
    </div>
    <!-- Additional "tabs-routable" is required on tabs -->
    <div class="tabs tabs-routable">
      <div class="tab page-content" id="tab-1"></div>
      <div class="tab page-content" id="tab-2"></div>
      <div class="tab page-content" id="tab-3"></div>
    </div>
  </div>

this is my route

var myroutes = [
  {
    path: '/',
    ComponentUrl: './index.html',
  },
  {
    path: '/tabs/',
    // Will load page from tabs/index.html file
    url: './pages/tabs.html',
    tabs: [
      {
        // Tab path
        path: '/',
        // Tab id
        id: 'tab-1',
        // Fill this tab content from content string
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>my name is joe</p>
          </div>
        `
      },
      {
        path: '/tab-2/',
        id: 'tab-2',
        url: './pages/home.html',
      },
      {
        path: '/tab-3/',
        id: 'tab-3',
        componentUrl: './pages/capture.html',
      },
    ],
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html'
  },
];

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  el: '#app', // App root element
  id: 'fling.photo.appbeta', // App bundle ID
  name: 'fling', // App name
  theme: 'auto', // Automatic theme detection
  // App routes
  routes: myroutes,
});

I had to do set the main-view to /tabs/ to see the Routable Tab in operation.

var mainView = app.views.create('.view-main',{url: '/tabs/'});

So confusing that the kitchen sink example of routable tabs has ‘./’ and ‘tab-2/’ and ‘tab-3’ as the hrefs instead of the ‘/’, ‘/tab-2/’ and ‘/tab-3’ of the documentation. Would love to understand what the difference is.

  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div class="page-content tab" id="tab1"></div>
    <div class="page-content tab" id="tab2"></div>
    <div class="page-content tab" id="tab3"></div>
  </div>

Looks like the hrefs for tab-2 and tab-3 need to specify one level down (which is not how it is in the 8.3.4 documentation). By changing them to ‘/tabs/tab-2’ it is loading the tab-2 page which is a plain html. Unless I have something wrong the documentation for Routable Tabs for 8.3.4 might need to be updated since it shows a tab html page and a route that is one level down but the href’s do not reflect that accurately. For the live example at the bottom of the tabs documentation page the Routable Tabs there has everything at the top level which is why I did not catch it when looking at that example.

Here is the change I made to tabs.html in my project:

    <div class="toolbar tabbar toolbar-top">
      <div class="toolbar-inner">
        <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
        <a href="/tabs/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
        <a href="/tabs/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
        <a href="/tabs/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
      </div>
    </div>

tab-2 now shows my home.html page when clicked. Now I have to figure out how componentUrl works in the 8.3.4 version so I can update my profile and captiure pages and use those for tab-2 and tab-3 instead of home.html.

If I go back to F7 5.0.0 and modify the Dom7 and root in app creation (of course) then the code I posted works.

Some big changes must be in version 6+ … Framework7 templates gone? New way of doing componentUrls? Both?

My profile page holds most of the functionality of the app in the componentUrl script so if that’s changed in major ways it could be a bear to upgrade. I’ll get it all updated for 6.0.0 vs 4.0.0 so at least the UI is functional. Then I’ll post the profile.html componentUrl content either here or in a new question to see how that is supposed to be modified to get up to 8.3.4