Router.navigate breaking back button

Here’s a video:

back and forth Mar-21-2023 15-17-19

Here the user fills in a form where the onSubmit is overridden to redirect the user to the next page, however the Browsers back button is broken: the URL changes but the view does not when back is pressed.

I’m invoking the back button using f7.view.main.router

This is true regardless of which browser history separator is used.

I’ve managed to resolve this.

The bug occurs specifically when a <Page> object is being mutated directly as useState() results in changes to the page object under the hood. So when using React, you should extract the contents of a page into its own fragment/component and then perform the needed mutations.

Here’s a rough sketch of what will cause a breakage:

const HomePage = () => {
  const state, setState = useState()
  // ... mutate state 
  return <Page><p>{state}</p></Page>
}

The above will cause breakages with navigation. However the following will work.

const Contents = () => {
  const state, setState = useState()
  // ... mutate state 
  return <p>{state}</p>
}

const HomePage = () => {
  return <Page><Contents /></Page>
}

This really needs to be added to the docs somewhere.