Enabling pushState is triggering 404 Error for root

Questions
1

Hi,

Here is my coding.

app.js

// Dom7
var $ = Dom7;

// Init App
var app = new Framework7({
    id: 'io.framework7.testapp',
    root: '#app',
    theme: 'auto',
    data: function () {
        return {
            user: {
                firstName: 'John',
                lastName: 'Doe',
            },
        };
    },
    methods: {
        helloWorld: function () {
            app.dialog.alert('Hello World!');
        },
    },
    panel: {
        swipe: 'both',
    },
    routes: routes,
    view: {
        pushState: true,
        preloadPreviousPage: false,
    }
});

routes.js

var routes = [
	{
		name: 'home',
		path: '/',
	    url: './index.html',
		on: {
			pageInit: function(event, page) {
				console.log('Home Page');

				page.app.params.panel.swipe = 'left';
			}
		},
    },

    {
		name: 'about',
		path: '/about/',
	    url: './about.html',
		on: {
			pageInit: function(event, page) {
				console.log('About Page');

				page.app.params.panel.swipe = 'left';
			}
		},
    },

    {
		name: 'viewlesson',
		path: '/lesson/:lessonID',
	    url: './view-lesson.html',
		on: {
			pageInit: function(event, page) {
				console.log('View Lesson '+page.route.params.lessonID);

				page.app.params.panel.swipe = 'both';
			}
		},
    },

    // Default route (404 page). MUST BE THE LAST
	{
		name: '404',
		path: '/(.*)',
		url: './404.html',
		on: {
			pageInit: function(event, page) {
				console.log('404 Page');

				page.app.params.panel.swipe = 'left';
			}
		},
	},
];

index.html

<div id="app">
    <div class="statusbar"></div>

    <div class="panel panel-left panel-reveal">
        <div class="page">
            <div class="page-content">
                <div class="block-title">Left Panel</div>

                <div class="block-title">Main View Navigation</div>
                <div class="list links-list">
                    <ul>
                        <li>
                            <a href="/" class="panel-close">Home</a>
                        </li>
                        <li>
                            <a href="#" data-panel="right" class="panel-open">Accordion</a>
                        </li>
                        <li>
                            <a href="/action-sheet/" class="panel-close">Action Sheet</a>
                        </li>
                        <li>
                            <a href="/badge/" class="panel-close">Badge</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <!-- Right Panel Start -->
    <div class="panel panel-right panel-cover">
        <div class="page">
            <div class="navbar">
                <div class="navbar-inner sliding">
                    <div class="title">Course Name</div>
                </div>
            </div>
            <div class="page-content">
                <div class="list links-list" style="margin-top: 0px;">
                    <ul>
                        <li><a href="/lesson/1" class="panel-close">Lesson 1</a></li>
                        <li><a href="/lesson/2" class="panel-close">Lesson 2</a></li>
                        <li><a href="/lesson/3" class="panel-close">Lesson 3</a></li>
                        <li><a href="/lesson/4" class="panel-close">Lesson 4</a></li>
                        <li><a href="/lesson/5" class="panel-close">Lesson 5</a></li>
                        <li><a href="/lesson/6" class="panel-close">Lesson 6</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Right Panel End -->

    <div class="view view-main view-init ios-edges" data-url="/">
        <div class="page">
            <div class="navbar">
                <div class="navbar-inner">
                    
                    <div class="left">
                        <a href="#" class="link icon-only panel-open" data-panel="left">
                            <i class="icon f7-icons ios-only">menu</i>
                            <i class="icon material-icons md-only">menu</i>
                        </a>
                    </div>

                    <div class="title sliding">Framework7</div>
                    
                    <div class="right">
                        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
                            <i class="icon f7-icons ios-only">search_strong</i>
                            <i class="icon material-icons md-only">search</i>
                        </a>
                    </div>

                    <form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
                        <div class="searchbar-inner">
                            <div class="searchbar-input-wrap">
                                <input type="search" placeholder="Search components"/>
                                <i class="searchbar-icon"></i>
                                <span class="input-clear-button"></span>
                            </div>
                            <span class="searchbar-disable-button">Cancel</span>
                        </div>
                    </form>
                </div>
            </div>

            <div class="page-content">
                <div class="list searchbar-hide-on-search">
                    <ul>
                        <li>
                            <a class="item-content item-link" href="/about/">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">About Framework7</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                
            </div>
        </div>
    </div>
</div>

When I load the app in chrome browser http://localhost/f7/app/ the chrome console is showing

404 Page

Please help me to resolve this.

2

in your app.js after app block, have you created the view ?

var mainView = app.views.create('.view-main');
1 Like
3

Do the forum search, you need to specify pushStateRoot parameter correctly, it should probably be /f7/app

1 Like
4

Dear @Francois-Xavier_G thanks for your reply.

i have added view-init so its initialize the view automatically.

5

Dear @Francois-Xavier_G,

I have resolved it by using following URL http://localhost/f7/app/#!/

6

oh yes, it’s because of
pushState: true,

option…

1 Like
7

If you run your app for example under http://localhost/your/app/ use the following settings:

 view: {
          pushState: true,
          pushStateRoot: '/your/app,
          pushStateSeparator: '/#!'
 }

Tested under v5.1.1

2 Likes
8

I used a structure like the one below. The back button works properly.

In app.js. (Add pushState and pushStateOnLoad )

..
view: {
        stackPages: true,
        pushState: true,
        pushStateOnLoad: false
    },
..

Add data-url="/#!" to “index.html” (i was add only for index.html. i wasn’t add for other pages.)

<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/#!">
...
</div>

For example, the index.html definition in the router.js file is below. I didn’t make any changes here.

var routes = [
  // Index page
  {
    path: '/',
    componentUrl: './index.html',
    name: 'home',
  },
...
]