Master Detail router error

Questions
#1

With this routes config

{
	path: '/settings/',
	component: SettingsNav,
	master: true,
	detailRoutes: [
		{
			path: '/settings/:id/',
			component: SettingsDo,
		},
	],

},

I get correct master/detail visualization. But if I click on back link in Master route Navbar (or browser back button) after navigate to detail routes I get this console error

Unhandled Promise Rejection: TypeError: null is not an object (evaluating '$previousMaster[0].f7Page.route')

When collapsed (on narrow screen) no problem occurs!!
@nolimits4web Suggestions???
Thanks in advance!

p.s. framework7 svelte

#2

Would be good to see live example or JSFiddle or similar

#3

@nolimits4web

You can replicate the issue navigating to ā€œGo Profileā€ > ā€œGo Settingsā€ and clicking on Navbar ā€œBackā€ with screen > masterDetailBreakpoint (800)

Console error ā€œTypeError null is not an object (evaluating ā€˜$previousMaster[0].f7Page.routeā€™)ā€

Please help me to find a solution!!
Thanks in advance

#4

You could add this :

<style>
:global(.view-master-detail .navbar-master-detail-root .link.back, .view-master-detail .page-master-detail-root .navbar .link.back) {
  display: none;
}
</style>

on your App.svelte

Back navigation on detail page should not be seen because navigation is on master-page

#5

@guillaumebiton thank you for your suggestion!!
I have updated App.svelte with your style settings, but the problem is not only related to ā€œbackā€ link in detail view.
The problem is also in ā€œbackā€ Navbar link of master view (in expanded view - masterDetailBreakpoint>=800).
The error is always the same!!
TypeError null is not an object (evaluating ā€˜$previousMaster[0].f7Page.routeā€™)
You can check it from the codesandbox previous link
@nolimits4web I suspect itā€™s a router bug!

#6

Ok, found an issue, will be fixed in upcoming update

1 Like