Routing don't work

Questions
1

Hi.
I have this index.html:

f7 Example 
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
  
  <div class="panel panel-left">
	  Pannello di Sinistra
	 </div>
	 
	 
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Toolbar -->
      <div class="toolbar">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="panel-open">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>
      
      

      <!-- Scrollable page content -->
      <div class="page-content">
        <!-- Link to another page -->
        <a class="link" href="/accordion">Link class to accordion</a><br/>
      </div>
    </div>
  </div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="framework7/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-js.js"></script>

The my-js.js included is this:
var app = new Framework7();

var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘My App’,
// App id
id: ‘com.myapp.test’,
// Enable swipe panel
panel: {
swipe: ‘left’,
},
// Add default routes
routes: [
{
name: ‘about’,
path: ‘/about/’,
url: ‘./about.html’,
},
{
name: ‘accordion’,
path: ‘/accordion/’,
url: ‘./accordion.html’,
},
],
// … other parameters
});

var mainView = app.views.create(’.view-main’);

If i click on link named “Link class to accordion” don’t work.
If i copy the url localhost:8080/f7examples/accordion in the browser i have Error 404 - Not Found.

2

Pay attention to trailing slash in url it must be the same as what you have in route path. So it should be href=“/accordion/“

3

I made the change but it does not work.
This is the change:

f7 Example 
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
  
  <div class="panel panel-left">
	  Pannello di Sinistra
	 </div>
	 
	 
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Toolbar -->
      <div class="toolbar">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="panel-open">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>
      
      

      <!-- Scrollable page content -->
      <div class="page-content">
        <!-- Link to another page -->
        <a href="accordion.html" target="_new">Accordion</a><br/>
        <a href="about.html">About app2</a><br/>
        <a class="link external" href="accordion.html">Link class external to accordion</a><br/>
        <a class="link external" href="./accordion/">Link class external to accordion route</a><br/>
        <a class="link" href="/accordion/">Link class to accordion</a><br/>
      </div>
    </div>
  </div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="framework7/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-js.js"></script>
4

See the link named “Link class to accordion”.

5

The issue I see is the panel, it should be outside of view

6

ok, it’s work.
But the link? Why don’t work?

7

I would suggest you haven’t add it to app routes or you didn’t init the view

8

I have removed this row:
var mainView = app.views.create(’.view-main’);

But don’t work.

9

Start from here https://github.com/framework7io/framework7-template-single-view

10

Thank you for the suggest.
I start from here.