[SOLVED] React :: stop calling ajax when going back

I’m developing a single view react app. That app has 3 level navigation like below.

  • Home Menu Item --> Click on Special Offers link
    • Load List of Items --> Click on item link
      • Load Single Item

Issue is when going back.

When going back from single item to List of items, home route ajax is calling. Also, when going back from List of items to Home, home route ajax is calling again.

I do not wish to call the ajax when going back. Here is the routes.js

import HomePage from '../pages/home.jsx';
import AboutPage from '../pages/about.jsx';
import FormPage from '../pages/form.jsx';

import DynamicRoutePage from '../pages/dynamic-route.jsx';
import RequestAndLoad from '../pages/request-and-load.jsx';
import NotFoundPage from '../pages/404.jsx';

//Pages
import ListViewPage from '../pages/list-view.jsx';
import SingleViewPage from '../pages/single-view.jsx';

import configApp from '../js/config_app';

var routes = [{
        path: '/',
        async: function(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            // var userId = routeTo.params.userId;
            // Simulate Ajax Request
            //page_home_screen API
            app.request.promise.get(configApp.Protocol + configApp.RestURI + '/page_home_screen/', { hotel_id: 1, app_id: 5, user_auth: 0 }).then(function(res) {
                var parseJson = JSON.parse(res.data);
                var data = parseJson.data;
                console.log('Load was performed :: ', data);
                // Hide Preloader
                app.preloader.hide();
                resolve({
                    component: HomePage,
                }, {
                    props: {
                        pageTitle: 'ONE App',
                        pageContent: data,
                    },
                });
            }).catch(function(err) {
                console.log(err.xhr);
                console.log(err.status);
                console.log(err.message);
                app.preloader.hide();
            });
        },
    },
    {
        path: '/about/',
        component: AboutPage,
    },
    {
        path: '/SPECIAL_OFFERS/',
        async: function(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            // var userId = routeTo.params.userId;
            // Simulate Ajax Request
            //page_special_offers API
            app.request.promise.get(configApp.Protocol + configApp.RestURI + '/page_special_offers/', { hotel_id: 1 }).then(function(res) {
                var jsonString = res.data.replaceAll("special_offer_", "");
                var parseJson = JSON.parse(jsonString);
                var data = parseJson.data;
                console.log('Load was performed :: ', data);
                // Hide Preloader
                app.preloader.hide();
                resolve({
                    component: ListViewPage,
                }, {
                    props: {
                        pageTitle: 'Special Offers',
                        pageContent: data,
                    },
                });
            }).catch(function(err) {
                console.log(err.xhr);
                console.log(err.status);
                console.log(err.message);
                app.preloader.hide();
            });
        },
    },
    {
        path: '/single-view/item/:itemId/',
        component: SingleViewPage,
    },
    {
        path: '/form/',
        component: FormPage,
    },
    {
        path: '/dynamic-route/blog/:blogId/post/:postId/',
        component: DynamicRoutePage,
    },
    {
        path: '/request-and-load/user/:userId/',
        async: function(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            var userId = routeTo.params.userId;
            // Simulate Ajax Request
            setTimeout(function() {
                // We got user data from request
                var user = {
                    firstName: 'Vladimir',
                    lastName: 'Kharlampidi',
                    about: 'Hello, i am creator of Framework7! Hope you like it!',
                    links: [{
                            title: 'Framework7 Website',
                            url: 'http://framework7.io',
                        },
                        {
                            title: 'Framework7 Forum',
                            url: 'http://forum.framework7.io',
                        },
                    ]
                };
                // Hide Preloader
                app.preloader.hide();
                // Resolve route to load page
                resolve({
                    component: RequestAndLoad,
                }, {
                    context: {
                        user: user,
                    }
                });
            }, 1000);
        },
    },
    {
        path: '(.*)',
        component: NotFoundPage,
    },
];

export default routes;

Please help!

I was able to fix it by adding stacked page boolean in f7 params.

view: {
   stackPages: true,
},