Hi,
After searching the forum and reading other “BACK” router issues, I’m unable to get a fix on my routing problem.
The back button works fine when routing back through one level of navigation. e.g.
HOME → Developer [BACK] → HOME
However if I’m deeper than one level of navigation then the back button changes to URL to the previous page, but displays my root page component. e.g.
URL: HOME → Developer → Dev 2 [BACK] → Developer
Display: home → developer → dev2 [BACK] → home
The app is a PWA with a tabbed view.
routes.js
var routes = [
{
name: 'Home',
path: '/',
component: HomePage,
},
{
name: "Roster",
path: '/roster/',
component: RosterPage,
},
{
name: "Friends",
path: '/friends/',
component: FriendsPage,
},
{
name: "My Profile",
path: '/profile',
component: ProfilePage,
},
{
name: "Settings",
path: '/settings',
component: SettingsPage,
},
{
name: 'Swap',
path: '/swap',
component: SwapPage,
},
{
name: 'Today',
path: '/today',
component: TodayPage,
},
{
name: 'Upgrade to Pro',
path: '/upgrade',
component: UpgradeToProPage,
},
{
name: 'FAQs',
path: '/faq',
component: FAQPage,
},
{
name: 'Privacy Policy',
path: '/privacy',
component: PrivacyPolicyPage,
},
{
name: 'Contact Us',
path: '/contact',
component: ContactUsPage,
},
{
name: 'Weather',
path: '/weather',
component: WeatherPage,
},
{
name: 'Logbook',
path: '/logbook',
component: LogbookPage,
},
{
name: 'Messages',
path: '/messages',
component: MessageListPage,
},
{
name: 'Commuter',
path: '/commuter',
component: CommuterPage,
},
{
name: 'Social Profile',
path: '/profile/:rpStatus/:userID',
async: async function({router, to, resolve}) {
var app = router.app
var userID = to.params.userID
var otherProfiles;
let oProfileUnsub = otherUserProfilesStore.subscribe(d => otherProfiles = d)
let profileData = otherProfiles.find(i => i.name === userID)
let rosterpopMember = to.params.rpStatus
console.log("Rosterpop Member?", rosterpopMember, rosterpopMember === "1" ? true : false);
resolve (
{
name: `User ${userID}`,
component: SocialProfilePage,
},
{
props: {
profileData: profileData,
isRosterpopMember: rosterpopMember === "1" ? true : false
}
},
oProfileUnsub()
)
},
},
{
path: '/more/:DutyDate/:type/:FltNum',
async: async function ({ router, to, resolve }) {
// App instance
var app = router.app;
// Show Preloader
app.preloader.show();
// User ID from request
var dutyDate = dayjs(to.params.DutyDate);
var dutyType = to.params.type;
var flightID = to.params.FltNum;
console.log(to.params);
// Simulate Ajax Request
let duty;
let roster;
let rosterUnsub = rosterStore.subscribe(i => roster = i)
console.log(dayjs(dutyDate).format("YYYY-MM-DD"), dutyType, flightID);
let typeArray = roster.events[dutyDate.format("YYYY-MM")][dutyDate.format("YYYY-MM-DD")].events.filter(e => e.type === dutyType)
if (flightID !== "0") {
duty = typeArray.find(f => f.flightNo === flightID)
} else {
duty = typeArray[0]
}
duty = {...duty, hasNightstop: roster.events[dutyDate.format("YYYY-MM")][dutyDate.format("YYYY-MM-DD")].events.find(e => e.type === "nightstop")}
if(duty.hasNightstop) {
let nightstopEndDate = dayjs(duty.hasNightstop.end2.date)
console.log(roster.events, nightstopEndDate.format("YYYY-MM"),nightstopEndDate.format("YYYY-MM-DD"));
let stop = false
let nextFlight;
Object.keys(roster.events[nightstopEndDate.format("YYYY-MM")]).forEach((key, index) => {
if(!stop && dayjs(key).isAfter(nightstopEndDate)) {
stop = true
nextFlight = roster.events[nightstopEndDate.format("YYYY-MM")][key].events?.find(e => e.type === "flight" && e.fromAirport?.code === duty.hasNightstop.airport.code)
console.log("*** NEXT FLIGHT AFTER NIGHTSTOP ***", nextFlight, key);
}
})
duty = {...duty, nextFlight: nextFlight}
}
console.log(typeArray, duty);
let flight;
let storedData = false;
let noData = false;
let inDataWindow = dayjs(duty.start).isBetween(dayjs().startOf('day').subtract(2, 'day'),dayjs().endOf('day').add(1, 'day'))
let inFuture = dayjs(duty.start).isAfter(dayjs().endOf('day').add(1, 'day'))
if (duty.type === "flight") {
let obj = {
flightNo: duty.flightNo,
from: duty.fromAirport.code,
to: duty.toAirport.code,
startDate: dayjs(duty.start).format('YYYY-MM-DD'),
endDate: dayjs(duty.start).format('YYYY-MM-DD'),
}
await AppManager.getFlightData(obj).then((res) => {
console.log("HANDLING getFlightData Response");
console.log("FETCH FROM DB:", res);
flight = res
}).catch((err) => {
console.log("CATCH ACTIVE", err);
let data;
let fdStoreUnsub = flightDataStore.subscribe((d) => data = d)
if (data && data.find(i => Object.values(i[`${obj.flightNo}-${obj.from}-${obj.startDate}-${obj.to}-${obj.endDate}`]))) {
let dataObj = data.find(i => Object.values(i[`${obj.flightNo}-${obj.from}-${obj.startDate}-${obj.to}-${obj.endDate}`]))
flight = Object.values(dataObj)[0]
storedData = true
} else {
noData = true
}
fdStoreUnsub()
})
if (!flight && !storedData) {
noData = true
}
}
console.log("FLIGHT DATA",flight);
// Hide Preloader
if(duty) {
// Resolve route to load page
console.log("** RESOLVING WITH THE FOLLOWING DUTY **", duty);
if (dutyType === "flight") {
resolve(
{
name: `Trip ${flightID}`,
component: MoreDetailTripPage,
},
{
props: {
duty: duty,
flight: flight,
storedData: storedData,
noData: noData,
withinDepartureWindow: inDataWindow,
flightIsInFuture: inFuture
}
}
);
} else if (dutyType === "report") {
resolve(
{
name: `REPORT`,
component: MoreDetailReportPage,
},
{
props: {
duty: duty,
}
}
);
} else if (dutyType === "clear") {
resolve(
{
name: `CLEAR`,
component: MoreDetailClearPage,
},
{
props: {
duty: duty,
}
}
);
}
// } else {
// console.log("-- NO PLAYER FOUND --")
}
app.preloader.hide();
rosterUnsub()
},
},
// DEVELOPER //
{
path: '/developer/',
component: DeveloperDashboard,
},
{
path: '/developer/serverFiles',
component: DeveloperServerFilesPage
},
{
path: '/developer/serverFiles/hotelInspector',
component: DeveloperServerFilesHotelInspectorPage
},
{
path: '/developer/pusher',
component: DeveloperPusherPage
},
{
path: '/developer/pusher/data',
component: DeveloperPusherDataPage
},
{
path: '/developer/storeUnwinder',
component: DeveloperStoreUnwindPage
},
{
path: '/developer/debugViewer',
component: DeveloperDebugViewerPage
},
{
path: '/developer/cookies',
component: DeveloperCookieCheckerPage
},
{
path: '/developer/fontStyles',
component: DeveloperFontStylesPage
},
{
path: '/developer/notificationStyles',
component: DeveloperNotificationStylesPage
},
{
path: '/developer/messagingLogin',
component: DeveloperMessagingLoginPage
},
// THIS IS WHERE THE DOCUNET CHECK ATTEMPT IS HAPPENING
{
path: '/external/:DocuNetLink',
async: async function ({ router, to, resolve }) {
/// ROUTER CODE TO TRY AND OPEN DOCUNET ELSE ALERT
try {
const response = await fetch("docunet://");
console.log("Docunet response", response);
// redirect to docunet
} catch {
alert('Unable to open DocuNet link');
}
}
},
{
path: '/noDocunetApp',
component: NoDocunetAppPage,
},
{
path: '(.*)',
component: NotFoundPage,
},
];
app.js views
<Views tabs class="safe-areas">
<DevMenu />
<Menu />
<Login />
<FreeVersionBlocker />
<!-- Tabbar for switching views-tabs -->
<Toolbar id="mainTabbar" tabbar icons bottom>
<Link
tabLink="#view-home"
text="Home"
tabLinkActive={activeTab === "home"}
on:click={() => {
f7.views.current.router.back("/");
activeTab = "home";
}}><i><Home05Icon /></i></Link
>
<Link
tabLink="#view-roster"
text="Roster"
tabLinkActive={activeTab === "roster"}
on:click={() => {
f7.views.current.router.back("/roster/");
activeTab = "roster";
}}><i><Calendar03Icon /></i></Link
>
<Link
tabLink="#view-friends"
text="Friends"
tabLinkActive={activeTab === "friends"}
on:click={() => {
f7.views.current.router.back("/friends/");
activeTab = "friends";
}}><i><UserGroupIcon /></i></Link
>
<Link
tabLink="#view-swap"
text="Swap"
tabLinkActive={activeTab === "swap"}
on:click={() => {
f7.views.current.router.back("/swap");
activeTab = "swap";
}}><i><ShuffleIcon /></i></Link
>
<Link
tabLink="#view-today"
text="Today"
tabLinkActive={activeTab === "today"}
on:click={() => {
f7.views.current.router.back("/today");
activeTab = "today";
}}
><svelte:component
this={AppManager.getTodayTabIcon($todaysDutyStore.type)}
/></Link
>
</Toolbar>
<View id="view-home" main tab tabActive url="/" />
<View id="view-roster" name="roster" tab url="/roster/" />
<View id="view-friends" name="friends" tab url="/friends/" />
<View id="view-swap" name="swap" tab url="/swap" />
<View id="view-today" name="today" tab url="/today" />
</Views>
I imagine I’ve got an error in how I’m navigating, as I occasionally get a router-transition-forward router-transition class sticking on my main view:
<div class="view view-main tab-active tab router-transition-forward router-transition" id="view-home">
This displays like:
