Routes not working for mobile Bootstrap app

Wappler General How To
#1

Wappler Version : 5.3.3
Operating System : Windows 11
Server Model: node.js
Database Type: sqlite
Hosting Type: local capacitor, but testing in browser at the moment.

Expected behavior

Route should display correct page

Actual behavior

A 404 file not found error occurs

How to reproduce

Project settings

image
image884Ă—707 23.4 KB

routes.js
image

Problems with routing on mobile app using Bootstrap 5
#2

Looks like I cannot define a route for the index.html page. Is this expected?

I was able to create content pages and navigate to those using links on the index.html page, but the URL shows index.html . Any way to have that rewritten to / or is this a limitation of the mobile app setup?

Here’s an example:
http://localhost:63441/index.html#!/dashboard

I realize this will not be shown to users because there is no URL shown in mobile/desktop apps, just curious.

#3
#4

It also seems the routes only work when you assign them to links on the index page. Trying to use them in page flows do not work.

#5

Bump, this is expected?

Doesn’t occur with Framework7.

#6

You could have a / instead of #!/ on the client, the only problem is that when you refresh the page you will get a 404 error when there is no server-side rewrites. The #! always works and doesn’t require any server-side rewrites.

1 Like
#7

Thanks Patrick, so it’s okay the routing http://localhost:63441/index.html#!/dashboard
I’m asking this beacuse I’m running in some issues with this:

if (window.location.pathname === "/index.html") {
        console.log("true");
    } else {
        console.log("false");

It will always return true because /index.html#!/dashboard === /index.html

Any workaround for this?

EDIT: Found out that setting the value of “window.location.href” navigates to the provided URL but inside a const returns the location.

#8

If you don’t like the hash routing, you can set it to use path with the following:

dmx.routing.router = 'path';

Using path for routing can give some issues when page is getting reloaded and when there is no default document. When you go to http://localhost:63441/ it is possible that you get a 404 instead of the index.html.

When using the hash router window.location.pathname will not work. you can use the following code:

const location = dmx.routing.getUrlInfo();
if (location.path === '/') {
  console.log('true');
} else {
  console.log('false');
}

The object returned from getUrlInfo() has the following properties: path, query and hash.

#9

Thanks for all your inputs, means a lot for me.

I think this is a bug, right?
Going back doesn’t reload the content page when it comes to going to main

Screen_bs

Another thing (maybe related):

Well, that’s exactly what is happening right now.

  1. Scenario 1
  • image
  • image
  • image
  1. Scenario 2
#10

The warning is because you didn’t have a route defined for /, which is the root route (index.html).

With mobile app different routing than hash will not work since you can’t do rewrites.

#11

Thanks Patrick

Sorry but the scenario 2 has a route defined for / and then all stills failing.

Sorry, maybe I’m not understanding it very well

#12

The / route should not load the ./index.html, the Url points to the content page and is loaded within the dmx-view component. Loading the index.html will result in an infinite loop of loading itself.

#13

You mean loading ./index.html? Because:

I tried routing the index.html (main page) with Wappler, don’t know why it considers as a content page. Will try manually edit that

#14

Your index.html is your main page. On that page you use the dmx-view component that loads partial pages (content pages). The routes point to the pages that will be loaded into the view component. When you have a route to index.html it will result in an infinite loop. The routes should only point to the partial pages that you want to load in the view component.

#15

It makes sense. But:
So this is wrong (from the docs) ?

Screenshot_20231212-132918_Chrome
Screenshot_20231212-132918_Chrome972Ă—2822 827 KB

Just followed the tutorial.
But I’ll do it again to see it with more details.

Sorry for bother you and thanks again for your time

#16

That’s the documentation about creating Single Page Apps for web apps, not for mobile apps. Routing for mobile apps works differently.

#17

Got it Teodor, I tried the both ways, and both are failing (Opened a bug report)

There’s a way I can set / to a main page in mobile?
My page starts on index.html, if I go to about.html,
I cant go to the main page (even with a content page on it)

#18

As @patrick explained, you can’t link to your main page. You need to link to a content page.

#19

Yes! I got that.
But:

  1. I open my mobile app with the blank screen (index.html)
  2. Go to about.html
  3. I cant go back

The reason I need an answer is because I need to close the app if path=main screen=the same as I open the app (index.html)

Don’t want to use browser history, just use the back button to a main page and if not, exit the app.

#20

Well why not create a “home” page as a content page then and load it?