Routes not working

Hello,

I have installed framework7 for the first time and would like to know if someone could tell me why when I try to pass the url:
http://192.168.0.4:3000/home/

I get this error on the page:
Cannot GET /home/

Here is my my-app.js code:

   // Initialize app
var myApp = new Framework7({

    routes: [
        {
            name: 'home',
            path: '/home/',
            url: 'home.html'
        },
        {
            name: 'login',
            path: '/login/',
            url: 'login.html'
        },
        {
            name: 'register',
            path: '/register/',
            url: 'register.html'
        },
        {
            name: 'sendreport',
            path: '/sendreport/',
            url: 'sendreport.html'
        },
        {
            name: 'contact',
            path: '/contact/',
            url: 'contact.html'
        },
        {
            path: '(*)',
            url: '404.html'
        }
    ]});


// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
    // Because we want to use dynamic navbar, we need to enable it for this view:
    dynamicNavbar: true
});

// Handle Cordova Device Ready Event
$$(document).on('deviceready', function () {
    console.log("Device is ready!");
});


// Option 2. Using one 'pageInit' event handler for all pages:
$$(document).on('pageInit', function (e) {
    // Get page data from event data
    var page = e.detail.page;

    if (page.name === 'home') {
        // Following code will be executed for page with data-page attribute equal to "about"
        myApp.alert('Here comes the home page');
    }

    if (page.name === 'login') {
        // Following code will be executed for page with data-page attribute equal to "about"
        myApp.alert('Here comes the login page');
    }

    if (page.name === 'register') {
        // Following code will be executed for page with data-page attribute equal to "about"
        myApp.alert('Here comes the register page');
    }

    if (page.name === 'contact') {
        // Following code will be executed for page with data-page attribute equal to "about"
        myApp.alert('Here comes the contact page');
    }

    if (page.name === 'sendreport') {
        // Following code will be executed for page with data-page attribute equal to "about"
        myApp.alert('Here comes the sendreport page');
    }
});

// Option 2. Using live 'pageInit' event handlers for each page
// $$(document).on('pageInit', '.page[data-page="home"]', function (e) {
//     myApp.alert('Here comes About page');
// });

Thank you

1 Like

I’m experiencing the same issue, but I’m not sure if I misunderstand the general concept of routing. Did you ever solve it? Maybe routes are only accessible from links within the app? I’m not sure how it should be able work without a serverside .htaccess file

Hope this will help you, Yes I sorted it out.

My app.js:

var app = new Framework7({

  root: '#app', // App root element
  id: 'com.xxxxxxxxx', // App bundle ID
  name: '', // App name
  theme: 'auto', // Automatic theme detection
  routes: routes,
});
var $$ = Dom7;

// Init/Create views
var homeView = app.views.create('#view-login', {url: '/login/'});

//Navbar
$$('.hide-navbar').on('click', function () {
  app.panel.close('.panel-left');
});

//This is my report page example, I pass js script into it on load.
$$(document).on('page:init', '.page[data-name="createreport"]', function (e) {
  $.getScript("js/init.js"); 
  $.getScript("js/functions.js");
});
//The problem I have right now is that my Ajax calls are currently not working, still trying to figure out how...

###########################################
route.js

routes = [
  {
    name: 'index',
    path: '/',
    url: './index.html',
  },
  {
    name: 'createreport',
    path: '/createreport/',
    url: './pages/createreport.html',
  },
  {
    name: 'viewreports',
    path: '/viewreports/',
    url: './pages/viewreports.html',
  },
  {
    name: 'select',
    path: '/select/',
    url: './pages/select.html',
  },
  {
    name: 'register',
    path: '/register/',
    url: './pages/register.html',
  },
  {
    name: 'contact',
    path: '/contact/',
    url: './pages/contact.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    name: '404',
    path: '(.*)',
    url: './pages/404.html',
  },
];

########################
Each page has this layout template for now:

<div class="page" data-name="createreport"> 
   <div class="page-content">
     <div class="block-title">Create a Report</div>
     <div class="block block-strong">

 //Put your content here
     </div>
     <div class="block">
    
     </div>
   </div>
 </div>

##########################
I have also created an init.js with

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
    //IF MOBILE
    document.addEventListener("deviceready", onDeviceReady, false);

     } else {

     onDeviceReady();

     }

Now this is cool because it detect if it is a mobile or the browser.

I wish the community offered more support as I am also struggling with many areas of the framework myself.

2 Likes

Thanks for your reply! I’m slowly getting the hang of it; I think my problem was/is that I’m trying to get this to work with tabbed views and I’m hitting a lot of dead ends. It would definitely help if there were a few more examples, esp for advanced topics like routing and push states. Otherwise it’s a really great framework!

1 Like

Already solved? You are also suffering with this framework and the low support of the community, but together we are coding !!! Hugs!

COuld you try to add a “dot” like this to your urls:

routes: [
        {
            name: 'home',
            path: '/home/',
            url: './home.html'
        },
        {
            name: 'login',
            path: '/login/',
            url: './login.html'
        },
        {
            name: 'register',
            path: '/register/',
            url: './register.html'
        },
        {
            name: 'sendreport',
            path: '/sendreport/',
            url: './sendreport.html'
        },
        {
            name: 'contact',
            path: '/contact/',
            url: './contact.html'
        },
        {
            path: '(*)',
            url: './404.html'
        }
    ]});

Let me know if this works.

And yes I know guys, the low support of the community is difficult, this is why I try to help you with the little knowledge I have managed to gain from this framework. Still struggling but it is slowly getting better :slight_smile:

Help others back when you can, we need this community to grow as it seems to be a pretty good framework.

2 Likes

@Benny_Yo why you need pass path and url together ? Every component has its own html part, isnt it enough ? I may miss something here

Hi! I am having the same issue. Ihave checked your code but I still can’t find what is wrong with mine. What was causing the issue exactly? I can navigate through links but just can’t navigate by changing URL

1 Like