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
- Load List of Items --> Click on item link
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!