title: Scroll to a specific div on a new page using react router dom
body: <p>I am currently using react router dom for routing in my react application.  I am trying to scroll to specific div on another page using Link from react router dom.  The issue I am running into is that the page changes yet it does not scroll to the id of the div i have specified.  I am unsure of what I am missing.</p>
  <p>my code is as follows:
  App.js</p>
  <pre><code>import { Switch, Route, BrowserRouter as Router } from &quot;react-router-dom&quot;;
  
  import Home from &quot;./Home&quot;;
  import PageTwo from &quot;./PageTwo&quot;;
  import &quot;./styles.css&quot;;
  function App() {
    return (
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
            &lt;Route path=&quot;/pagetwo&quot; component={PageTwo} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  
  Home Page
  </code></pre>
  <pre><code>import { Link } from &quot;react-router-dom&quot;;
  
  const Home = () =&gt; {
    return (
      &lt;div&gt;
        &lt;div&gt;Navigate to div on new page&lt;/div&gt;
        &lt;Link to=&quot;/pagetwo#div&quot;&gt;Home&lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  
  </code></pre>
  <p>PageTwo:</p>
  <pre><code>const PageTwo = () =&gt; {
    return (
      &lt;div&gt;
        &lt;div style={{ marginTop: 500 }} id=&quot;div&quot;&gt;
          Page Two Div
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default PageTwo;
  
  </code></pre>
  <p>css:</p>
  <pre><code>html {
    scroll-behavior: smooth;
  }
  
  </code></pre>
  <p>attached is a code sandbox for debugging! <a href="https://codesandbox.io/s/silent-hill-0ln79?file=/src/PageTwo.js:0-171" rel="nofollow noreferrer">https://codesandbox.io/s/silent-hill-0ln79?file=/src/PageTwo.js:0-171</a></p>