React router not changing url

Question

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 http://localhost:3000/favorites where it should be http://localhost:3000 . 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:

return(
      <BrowserRouter >
      <div className='routes'>
        <Route path='/' component={App}/>
        <Route path='/favorites' component={Favorites}/>
      </div>
      </BrowserRouter>
    ) }

The SearchBox component:

return(
  <form className="search-box" >
  <input type="text" placeholder="Search.." name="search" autoComplete='off'/>
  <button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}>
  </button>
  </form>
)

And the SideNav component with the links:

return(
  <nav className='naviagtion'>
    <ul className='mainmenu'>
    <div className='img-logout'>
      <img src={this.props.info.image} alt='Avatar' />
      <Logout handleLogout={this.handleLogout.bind(this)}/>
    </div>
    <SearchBox search={this.searchHandler.bind(this)}/>
      <li>
        <a href="/">home</a>
      </li>
      <li>
        <a href="/favorites">favorites</a>
      </li>
      <li>
        <a href="">playlists</a>
          <ul className='submenu'>
          <li>
            <a href="">
              <strong>list of lists</strong>
            </a>
          </li>
          </ul>
      </li>
      <li>
        <a href="">friends</a>
      </li>
    </ul>
  </nav>
)

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.

EDIT:

Here is where the SideBar is being rendered in the Home Component.

      <div>
        <SideBar
          info={this.state.info}
          logout={this.handleLogout.bind(this)}
          search={this.handleSearch.bind(this)}
        />
        <Main videos={this.state.videos}/>
      </div>

And here is the App.js

  <div className='App'>
    {localStorage.userData === undefined
      ? this.renderLogin()
      : <Home logout={this.logout.bind(this)} deets=
        {localStorage.userData}/>}
  </div>

Answer 1

A couple things that might help.

1) The Route component goes inside the Switch component (make sure to import). Also, make sure to use "exact path" for "/" or the user won't make it to "/favorites".

return(
  <Switch>
  <div className='routes'>
    <Route exact path='/' component={App}/>
    <Route path='/favorites' component={Favorites}/>
  </div>
  </Switch>
) }

2) BrowserRouter goes around the whole app (probably in your index.js), which should look something like this:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom" OR "react-router"
import App from "./src/App";

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById("app"));

3) The Route components may need to be direct children of Switch, so I'd try removing the div in between. I'll look into it and update this answer when I figure it out.

4) You need to use the Link component instead of an a tag to actually link to the Route's you've set up:

import { Link } from "react-router-dom" OR "react-router" //not sure what you're using

...

return(
  <nav className='naviagtion'>
    <ul className='mainmenu'>
    ...
     <li>
       <Link to="/">home</Link>
     </li>
     <li>
       <Link to="/favorites">favorites</Link>
     </li>
   ...
   </ul>

)