Master Detail router error

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

Would be good to see live example or JSFiddle or similar

@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

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

@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!

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

1 Like