title: Changing URL onClick in ReactJS
body: <p>In my project I have a <code>TabComponent</code> which displays 3 tabs: home, popular, all.</p>
  
  <p>Now, I am using <code>context</code> of react to maintain:</p>
  
  <ol>
  <li><code>activetab</code> which stores current tab.</li>
  <li><code>toggleTab</code> method which changes <code>activetab</code> using <code>setState</code>.</li>
  </ol>
  
  <p><strong>TabComponent</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import Context from '../../provider'
  import {Nav, NavItem, NavLink} from 'reactstrap'
  import {Redirect} from 'react-router-dom'
  import classnames from 'classnames'
  
  export default class TabComponent extends Component {
      render() {
          return (
              &lt;Context.Consumer&gt;
                  {context =&gt; (
                      &lt;Nav tabs color='primary'&gt;
                          &lt;NavItem&gt;
                              &lt;NavLink
                                  className={classnames({ active: context.activeTab === '1' })}
                                  onClick={() =&gt;{context.toggleTab('1')}}
                              &gt;
                              Home
                              &lt;/NavLink&gt;
                          &lt;/NavItem&gt;
                          &lt;NavItem&gt;
                              &lt;NavLink
                                  className={classnames({ active: context.activeTab === '2' })}
                                  onClick={() =&gt; {context.toggleTab('2')}}
                              &gt;
                              Popular
                              &lt;/NavLink&gt;
                          &lt;/NavItem&gt;
                          &lt;NavItem&gt;
                              &lt;NavLink
                                  className={classnames({ active: context.activeTab === '3' })}
                                  onClick={() =&gt; {context.toggleTab('3')}}
                              &gt;
                              All
                              &lt;/NavLink&gt;
                          &lt;/NavItem&gt;                
                      &lt;/Nav&gt;
                  )}
              &lt;/Context.Consumer&gt;
          )
      }
  }
  </code></pre>
  
  <p>What I want to achieve is, <code>onClick</code> should also change the URL.</p>
  
  <ul>
  <li>For tab 1, the url should be <code>\home\</code></li>
  <li>For tab 2, the url should be <code>\popular\</code></li>
  <li>For tab 3, the url should be <code>\all\</code></li>
  </ul>
  
  <hr>
  
  <p>Using <code>this.props.history</code> in the <code>onClick</code> method is not working with <code>export default withRouter(TabComponent)</code>.</p>
  
  <pre><code>&lt;NavLink
      className={classnames({ active: context.activeTab === '1' })}
      onClick={() =&gt;{
          context.toggleTab('1');
          this.props.history('/home/');
      }}
  &gt;
  </code></pre>
  
  <p><strong>Error</strong>:</p>
  
  <blockquote>
    <p>You should not use <code>&lt;Route&gt;</code> or <code>withRouter()</code> outside a <code>&lt;Router&gt;</code></p>
  </blockquote>
  
  <hr>
  
  <p><code>window.location</code> in <code>onClick</code>:</p>
  
  <pre><code>&lt;NavLink
      className={classnames({ active: context.activeTab === '1' })}
      onClick={() =&gt;{
          context.toggleTab('1');
          window.location = '/home/';
      }}
  &gt;
  </code></pre>
  
  <p>This actually works but the behaviour is not good.</p>
  
  <p>Clicking the tab does the following:</p>
  
  <ol>
  <li>It Changes the content of body using <code>context.toggleTab</code>.</li>
  <li>Then it changes the URL using <code>window.location</code>.</li>
  <li>Since, the URL changed, the page is getting reloaded.</li>
  </ol>
  
  <p>The problem here is the <strong>content is already loaded in the 1st step</strong>. Using <code>window.location</code> changes the URL but also <strong>re-loads</strong> the page which is not required. It there a way to do skip the 3rd step or is that any other method which <strong>just</strong> changes the URL?</p>