title: Conditionally disable scroll to top on dom change react router
body: <p>I've implemented a ScrollToTop component inside my Browser Router so the scroll position is (0,0) on every new dom change. </p>
  
  <p>i.e.) /explore > /about will scroll to top.</p>
  
  <p>However, within the explore page I have a tab-like submenu(Home, Items, Budget) which manipulates the router to scroll to top when it shouldn't. The Home tab takes default path of Explore while Items and Budget are a nested routes inside the Explore.</p>
  
  <p>i.e.) /explore > /explore/items or /explore > /explore/budget </p>
  
  <p>I've tried to use conditions in my ScrollToTop component but failed. I've looked at React router training restoration scroll guide but wasn't successful. Would anyone know how to conditionally disable scroll to top on certain pathnames or locations?</p>
  
  <p>Here is my ScrollToTop:</p>
  
  <pre><code>const ScrollToTop = (props) =&gt; {
  
    useEffect(() =&gt; {
      if (props.history.action === 'POP') {
          return;
      }
  
      let hash = props.location.hash;
      if (hash) {
        let element = document.querySelector(hash);
        if (element) {
          element.scrollIntoView({block: 'start', behavior: 'smooth'});
        }
      } else {
        window.scrollTo(0, 0);
      }    
    });
  };
  </code></pre>