React - .navigate creates multiple instances of component

Questions
1

Hello all,
I’ve hit a wall with f7 router (5.3.2) and react.
I’ve created a view this way:

<App params={f7Params}>
  <View url="/login" main>
  </View>
</App>

and in componentDidUpdate there’s a check that says, if the login was successful, navigate to the main page, something like this:

if (RaApiAuth.isAuthenticated() && this.$f7router.currentRoute.url !== "/main/") {
  this.$f7router.navigate('/main/');
  return;
}

After this the view component, as observed with the react developer tools on chrome, contains both the login and the main component, as it should be.
Whenever the user clicks on the logout button, user login info are deleted for the current session and then the following code gets processed:

componentDidUpdate(prevProps, prevState, snapshot) {
if (!RaApiAuth.isAuthenticated() && this.$f7router.currentRoute.url !== “/login/”) {
this.$f7router.navigate(’/login/’);
}
};

This is similar to the previous snippet, it is simply a matter of navigating back to the login page.
Problem is, now the view has two instances of /login/, and they both receive / fire events, creating unpredictable behaviour.

This is what I am talking about:

41
Schermata 2020-01-20 alle 15.14.41.png1042×547 52.9 KB

Any ideas?
Thanks for your time

2

Change to:

this.$f7router.navigate('/main/', { clearPreviousHistory: true });
3

Thanks for the reply, I appreciate it.
I’ve found the problem to be the fact that we outputted NULL in the login component once the login was succesfull.
Something like this:

if (auth.loggedIn) {
return null;
}

at the top of the render() method.
This was enough to confuse router or perhaps react? Into believing that the component wasn’t there.
As soon as I removed that “if”, everything worked.
I will keep your suggestion in mind for the future though.
Thanks for having taken the time to reply!