Component not unmounting when navigating to other page

Questions
1

I have a component that is navigating to another one using the following code:

f7.views.main.router.navigate('/', {url: '/'});

Inside the component im navigating away from I got the following debug code during unmount:

  // useEffect to register the beforeunload event listener
  useEffect(() => {
    const handleBeforeUnload = (event) => {
    event.preventDefault();
    event.returnValue = '';
    };

    // Add event listener when the component mounts
    window.addEventListener('beforeunload', handleBeforeUnload);

    // Clean up by removing the event listener when the component unmounts
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      console.log("unmounted");
    };
  }, []);

If I am doing so, the component is never being unmounted and the console never outputs “unmounted”. Only when navigating the second time to that page (which itself is not working) and navigating away I am seeing that output.

If I use:

f7.views.main.router.navigate('/', {url: '/', reloadCurrent:"true"});

The console outputs the unmounted correctly and the component works without any problems when coming back. I can use reloadCurrent because else when navigating to ‘/’ its not updating the URL.

What am I doing wrong?
@nolimits4web Maybe you have an idea, because I have seen some similar questions about the URL problem.