[SOLVED] Back button stops working on multi-level pages

I am working on an app (currently, Android only) that basically has 3 pages. The pages are as follows:

Index
CodeSearch
DealerLocater

From the index page, I can either select to go to CodeSearch or DealerLocater. If I go to either of these pages, then click BACK, it works as it should and goes back to index.html.

Now, from the CodeSeacrh page, the user has an option to go to DealerLocater. Going to that page works as it should. When clicking back from the DealerLocater pag, it goes back to CodeSearch, as it should. Now, here is where it gets interesting. If I click the back button here, I get a page not found message (my 404.html page).

How can I fix this so it goes back 1 page on each click? Thanks in advance…

Посмотрите в консоли какие грузятся url.

It means you have some wrong configuration for your View or in routes

what should I look for to track down the issue?

This issue means app can’t find matching route for home page. Show your routes and views configuration

Here is my routes.js file:

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/error/',
    url: './pages/error.html',
  },
  {
    path: '/dealer/',
    url: './pages/dealer.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
  1. put your navbar code here
  2. try this

Vue:
<f7-navbar title="Title" back-link="Back" icon-material="arrow_back">

Core:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Title</div>
    </div>
</div>

@Overman

Yeah, that is what I have. At least, I don’t see a functional difference. Here is what I have:

  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title"><img src="images/x.png" height="35%" width="35%"></div>
    </div>
  </div>

Show your full index.html file + show all the related code for Views initialization/creation

Is there anyway to attach or send you my project for view so you can see all I have?

I tried with nested routes as below:

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/error/',
    url: './pages/error.html',
    routes: [
      {
        path: '/dealer/',
        url: './pages/dealer.html',
      },
    ],
  },
  {
    path: '/dealer/',
    url: './pages/dealer.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

Sadly, same result… I am lost on this…

Fork this and paste code https://jsfiddle.net/nolimits4web/o2ejupu1/

Issue is that you have pushState enabled. If it is a cordova app, you need to disable it. Otherwise, it must be enabled on main View only. And check the pushStateRoot View’s parameter. If app running not on server root then it should reflect it

@nolimits4web I saw a post you made last night stating that, so I did remove pushState. However, I am still having the same issue where after navigating to 3rd level, I get a 404 trying to go back twice…

So, digging around the f7 documentation, I found the stackPages is disabled by default. I fixed my issue by adding stackPages: true to my view code.

@nolimits4web
Hi Vladimir,
Framework7 is fantastic. And without much coding knowledge, we are able to use the documentation and kitchen-sink examples to create our own apps. A person like me doesn’t know Javascript at all and I’m a basic web developer and I don’t want to learn it in detail for my requirements. But, most of us have this problem - Back button doesn’t work in Android. Most of us are processing it with Adobe Phonegap. Even when we look at the documentation of views parameters, we can hardly understand what to do next. Routes, Views are very confusing. Could you please help by creating a seperate page for known issues (like back button in android) or provide the information with example in views documentation for this specific issue?
Almost each of us who are new to this are struggling with this part. Thanks in advance!

according to this => Let’s make FAQ section
he is working on this

meanwhile you can use framework7-cli (which is highly recommended anyway)
the back-button is handled there

Thanks @plpl

@nolimits4web
Hi Vladimir,

Thank you so much. I could get it corrected with your suggestions and notes in different posts related to this issue.
I had wrongly added an additional view statement when I was trying to test it (referring to the f7 documentation, but the same was absent in downloaded kitchen-sink example).

When adding the features as needed, an additional view statement was introduced wrongly. After identifying this, I reintroduced pushstate and pushStateSeperator as you advised. It worked. It was my mistake. Thanks a lot for your advice.
There is really no limits for web. :blush:

1 Like