title: React router not changing url
body: <p>I'm new to React(1 week :P). I have an app that hits an api based on a search term. From those results a user is able to favorite items from the results. When a I clicks on the link for favorites, I am directed to the correct component and the url reflects this change. However, when I enter a new search term, from the side navigation bar that is statically there always, I am presented with the correect information in the correct component, but the url does not change; it still says <code>http://localhost:3000/favorites</code> where it <em>should</em> be <code>http://localhost:3000</code>. Here is the relevant code, if there is any more that you feel is needed to hazard a guess please let me know. 
  The routes:</p>
  
  <pre><code>return(
        &lt;BrowserRouter &gt;
        &lt;div className='routes'&gt;
          &lt;Route path='/' component={App}/&gt;
          &lt;Route path='/favorites' component={Favorites}/&gt;
        &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      ) }
  </code></pre>
  
  <p>The <code>SearchBox</code> component:</p>
  
  <pre><code>return(
    &lt;form className="search-box" &gt;
    &lt;input type="text" placeholder="Search.." name="search" autoComplete='off'/&gt;
    &lt;button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}&gt;
    &lt;/button&gt;
    &lt;/form&gt;
  )
  </code></pre>
  
  <p>And the <code>SideNav</code> component with the links:</p>
  
  <pre><code>return(
    &lt;nav className='naviagtion'&gt;
      &lt;ul className='mainmenu'&gt;
      &lt;div className='img-logout'&gt;
        &lt;img src={this.props.info.image} alt='Avatar' /&gt;
        &lt;Logout handleLogout={this.handleLogout.bind(this)}/&gt;
      &lt;/div&gt;
      &lt;SearchBox search={this.searchHandler.bind(this)}/&gt;
        &lt;li&gt;
          &lt;a href="/"&gt;home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/favorites"&gt;favorites&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;playlists&lt;/a&gt;
            &lt;ul className='submenu'&gt;
            &lt;li&gt;
              &lt;a href=""&gt;
                &lt;strong&gt;list of lists&lt;/strong&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;friends&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  )
  </code></pre>
  
  <p>I've seen a lot of information of the url changing but the component not rendering. That is not my problem. Then component is rendering correctly, however the url is not reflecting that.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is where the SideBar is being rendered in the Home Component. </p>
  
  <pre><code>      &lt;div&gt;
          &lt;SideBar
            info={this.state.info}
            logout={this.handleLogout.bind(this)}
            search={this.handleSearch.bind(this)}
          /&gt;
          &lt;Main videos={this.state.videos}/&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>And here is the <code>App.js</code></p>
  
  <pre><code>  &lt;div className='App'&gt;
      {localStorage.userData === undefined
        ? this.renderLogin()
        : &lt;Home logout={this.logout.bind(this)} deets=
          {localStorage.userData}/&gt;}
    &lt;/div&gt;
  </code></pre>