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>

Kit Masaracchia · Accepted Answer · 2017-12-31 19:07:39Z

4

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>

)

edited Dec 31, 2017 at 19:07

answered Dec 31, 2017 at 18:52

Kit Masaracchia

1015 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Int'l Man Of Coding Mystery Over a year ago

That did it! Thank you! My side bar disappeared though. It's not that big of a deal and I can probably work that out. But do you have any advice for that? Do I need to put that in the routes as a '/' component?

Kit Masaracchia Over a year ago

Where are you links showing up? Are they part of the sidebar?

Int'l Man Of Coding Mystery Over a year ago

Yes. In my Home component, I render the SideBar and Main components. Main is the component that render the search results.

Kit Masaracchia Over a year ago

Can you post your file structure/component structure? I'm not quite understanding what you're trying to do and what is/isn't rendering.

Int'l Man Of Coding Mystery Over a year ago

I updated the initial code to include where the Home and SideBar are being rendered.

|

Collectives™ on Stack Overflow

React router not changing url

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related