title: Reactjs adding the selected react-bootstrap tab key # to the current URL
body: <p>I have component contain &quot;React Bootstrap Tab&quot;, i want if user select any of these three tabs , to add to current url:-</p>
  <blockquote>
  <p>http://localhost:3000/account</p>
  </blockquote>
  <p>the selected tab key name, so the url change like this:-</p>
  <blockquote>
  <p>http://localhost:3000/account#messages</p>
  </blockquote>
  <p>I have tried by using props.history.push in onSelect function but nothing happened.</p>
  <pre><code>import React from &quot;react&quot;;
  import KhatmaTable from &quot;../components/Account/KhatmasTable&quot;;
  import Square from &quot;../components/Account/Square&quot;;
  import Messages from &quot;../components/Account/Messages&quot;;
  import { Tabs, Tab } from &quot;react-bootstrap&quot;;
  
  class Account extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: {},
        khatmas: [],
        selectedKey: this.props.location.hash
          ? this.props.location.hash.substring(1)
          : &quot;home&quot;,
      };
    }
  
    render() {
      const count = [this.state.khatmats];
      console.log(this.state.user);
      console.log(this.state.user.khatmas ? this.state.user.khatmas.length : &quot;&quot;);
      return (
        &lt;div className=&quot;card&quot;&gt;
          &lt;div className=&quot;card-body&quot;&gt;
            &lt;Tabs
              id=&quot;controlled-tab-example&quot;
              activeKey={this.state.selectedKey}
              onSelect={(k) =&gt; {
                this.setState({ selectedKey: k });
                this.props.history.replace = &quot;account&quot; + &quot;#&quot; + k;
              }}
            &gt;
              &lt;Tab eventKey=&quot;home&quot; title=&quot;home&quot;&gt;
                &lt;div className=&quot;row&quot;&gt;
                  &lt;Square /&gt;
                &lt;/div&gt;
              &lt;/Tab&gt;
              &lt;Tab eventKey=&quot;khatmat&quot; title=&quot;profile&quot;&gt;
                &lt;KhatmaTable /&gt;
              &lt;/Tab&gt;
              &lt;Tab eventKey=&quot;messages&quot; title=&quot;messages&quot;&gt;
                &lt;Messages /&gt;
              &lt;/Tab&gt;
            &lt;/Tabs&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Account;
  </code></pre>