Router doesn't align with history API after commands.prevent()
In the following scenario, I navigate from / to /page1, then to /page2, then I click the back button and cancel the navigation, if I try to go back again and cancel the navigation, I get kicked out of the application.
It seems like the History API moves back even if I prevent navigation, but since the router detects the prevention, it changes the URL to the current page and doesn't display the previous page. After clicking the Back button again, the History API moves back one page, and the router reacts to this, resulting in us losing the previous page in the history.
My page2 component has a simple confirm in the onBeforeLeave that returns commands.prevent(), it looks like this...
export default class Page2 extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Page 2</h1>`
}
onBeforeLeave(location: RouterLocation, commands: PreventCommands) {
if (!confirm('Are you sure?')) {
return commands.prevent()
}
return undefined
}
}
Just in case this is how I set my routes:
const outlet = document.getElementById('outlet')!
const router = new Router(outlet)
router.setRoutes([
{
path: '/',
action: () => {
const component = document.createElement('app-home')
return component
}
},
{
path: '/page1',
action: () => {
const component = document.createElement('app-page1')
return component
}
},
{
path: '/page2',
action: () => {
const component = document.createElement('app-page2')
return component
}
},
{
path: '/page3',
action: () => {
const component = document.createElement('app-page3')
return component
}
}
])
- Do you consider this a bug or is it out of the scope of @vaadin/router ?
- Is there any way to avoid this issue?
Hi @platosha,
I wanted to ask you, since you're the number one contributor to this repository, if you're still working on issues for this project or if there's someone else working on it.
I was also considering trying to fix it or having someone else on my team create a PR for the Vaadin router, do you think someone could review that hypothetical PR?