2

I have a small issue with safari and my mobile navigation and safari's back button (I cannot recreate this in other browsers). I have a little slide out menu that hides itself offscreen (not just hides, but it says display:none too). I've noticed that when I navigate somewhere using the mobile menu then hit "go back" on safari, I see the mobile menu (which should be closed according to the app stated w/ redux) open for about a second, then it goes away.

To dig into this a little, I have an onClick on my react router <Link> inside my mobile menu - these are the links which take you to the next page. The onClick does not prevent the normal beahiour it just runs some functions to reset the mobile menu back to original (hidden) position.

So it looks like that, the link tags are like -

  <Link
    className="nav-link"
    onClick={this.closeMobileNav}
    to="/my-custom-url"
    >

and closeMobileNav looks like :

closeMobileNav() {
   this.closeAllDrawers();
  this.props.mobileNavToggle(false);
}

Those functions inside closeMobileNav just toggle everything closed inside the menu so it resets.

I did a bunch of googling to see if anyone else has come across something like this with safari. Then I came across this SO answer that seemed helpful -> Prevent safari loading from cache when back button is clicked . I am not 100% certain this is the behavior but this looks like it has the same symptoms as me.

So I know with the onClick event on the <link> tags you can preventDefault. I am wondering if I could stall the actual linking behavior until the drawer has shut fully, then go on as usual - something like -.

 closeMobileNav(event) {
  // stop react-router link's normal behavior
  event.preventDefault();

  // let functions run to close drawer so previously cached page is closed
  this.closeAllDrawers();
  this.props.mobileNavToggle(false);

  // run Links normal click , (not sure what this would be) 
  event.????()
 }

I am not sure how you would go about doing this, or if it is even possible with react router. It may be the case I might have to restructure entirely how this menu works, however it would be great to find a working solution with my current set up. Any insight or ideas on how to fix this would be greatly helpful, I have been digging into this for a while now and can't seem to find any true fix.

I am Using react 15.4 and react router 2.8 (and react-router-redux 4.0.8 if that helps). Thanks!

Andrew Brēza
  • 7,705
  • 3
  • 34
  • 40
ajmajmajma
  • 13,712
  • 24
  • 79
  • 133

0 Answers0