title: Using react-web-tabs, is there a way to switch tabs AND navigate to hashed ID via click?
body: <p>I'm building a conference website using three of these tabs (#speaker, #talks, #schedule). I think it is fair to want interactions between the tabs, here are a couple use cases that I cannot seem to solve.</p>
  
  <ol>
  <li>From the #talks tab, I click on the bio hash - #johnsmith.  This id exists within the page, but since I don't first switch tab to #speakers, nothing renders.</li>
  <li>If I want to reference a specific talk and email someone the url:  <a href="https://website.com#speaker_name" rel="nofollow noreferrer">https://website.com#speaker_name</a> the tabs won't open, and nothing but the tabs render.</li>
  </ol>
  
  <p>The problem is compounded by the fact that when I click on an anchor tag href using a '#id', I must reload the page for it to fire.</p>
  
  <p>I feel like there should be some way to pass a parameter when changing the tab or <em>something</em>... I'm in a tough spot because I'm rolling out   code, but need this functionality badly.</p>
  
  <p>Here is the actual open-source repo - <a href="https://github.com/kernelcon/website" rel="nofollow noreferrer">https://github.com/kernelcon/website</a>.  The code I'm referencing can be found in src/pages/Agenda/.</p>
  
  <p>Here is some example code.</p>
  
  <p>Agenda.js</p>
  
  <pre><code>  &lt;Tabs defaultTab={this.state.defaultTab}
      onChange={(tabId) =&gt; { this.changeTab(tabId) }}
      vertical={vert}&gt;
      &lt;TabList vertical&gt;
        &lt;Tab tabFor="speakers"&gt;Speakers&lt;/Tab&gt;
        &lt;Tab tabFor="talks"&gt;Talks&lt;/Tab&gt;
      &lt;span&gt;
        &lt;TabPanel tabId="speakers"&gt;
          &lt;Speakers /&gt;
        &lt;/TabPanel&gt;
        &lt;TabPanel tabId="talks"&gt;
          &lt;Talks /&gt;
        &lt;/TabPanel&gt;
      &lt;/span&gt;
    &lt;/Tabs&gt;
  </code></pre>
  
  <p>Talks.js</p>
  
  <pre><code>changeTab(id) {
    window.location.reload(false); 
  }
  
  getTalks() {
    // Order Alphabetically
    const talksOrdered = speakerConfig.sort((a,b) =&gt; (a.title &gt; b.title) ? 1 : ((b.title &gt; a.title) ? -1 : 0));
    const talks = talksOrdered.map((ele, idx) =&gt; {
      const twitterUrl = ele.twitter.replace('@', '');
  
      return (
        &lt;div id={ele.talk_id}
          key={idx}
          className='single-talk'&gt;
          &lt;div className='talk-title'&gt;{ele.title}&lt;/div&gt;
          &lt;div className='talk-sub-title'&gt;
            &lt;div className='speaker-name'&gt;
              &lt;a onClick={() =&gt; {this.changeTab(ele.speaker_id)}}
                href={`#${ele.speaker_id}`}&gt;{ele.speaker}&lt;/a&gt;
            &lt;/div&gt;
          ...
  </code></pre>