title: React: Link to a div on another html page
body: <p>I have a link</p>
  
  <pre><code>&lt;a href="about.html#div2"&gt;Click me&lt;/a&gt;
  </code></pre>
  
  <p>When I click the link I am brought to about.html at the top of the document.</p>
  
  <p>If I am already visiting about.html and and I type about.html#div2 in the search bar of my browser(chrome), then my browser goes down to the specific div(div2).</p>
  
  <p>I tried going to the component that loads the other page and inside ComponentDidMount, adding something like</p>
  
  <pre><code>var sectionName = window.location.hash.slice(1);
  
  //then show the section
  $('#' + sectionName ).show();
  </code></pre>
  
  <p>But for some reason the div is still null. How is it null if the component mounted?</p>
  
  <p>Using a Link Component also doesn't work, as I need to put it in a router, which I've done using </p>
  
  <pre><code>&lt;HashRouter&gt;
  
          &lt;Link style={linkButton} to={about.html#div2}&gt;Learn more&lt;/Link&gt;
  &lt;/HashRouter
  </code></pre>
  
  <p>But this really seems to do nothing.</p>
  
  <p>How can I get my browser to visit the div on the other page from the link on another page.</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>This is what my about component looks like essentially</p>
  
  <pre><code>class About extends React.component {
      constructor(){
          var p = props;
          var Style = {
              display:'flex',
              flexDirection:'column'
          }
      }
      componentDidMount(){
          var sectionName = window.location.hash.slice(1);
  
          //then show the section
          $('#' + sectionName ).show();
      }
      render(){
          return (
              &lt;div style={Style}&gt;
                  &lt;Service id='div1' serv={Service1}/&gt;
                  &lt;Service id='div2' serv={Service2}/&gt;
                  &lt;Service id='div3' serv={Service3}/&gt;
                  &lt;Service id='div4' serv={Service4}/&gt;
                  &lt;Service id='div5' serv={Service5}/&gt; 
              &lt;/div&gt;
  
      )
      }
  }
  
  var Service = (props) =&gt; {
      var serv = props.serv;
      return (
          &lt;div id={props.id}&gt;
              ....
          &lt;/div&gt;
      )
  }
  </code></pre>