title: react router changes the URL, but the component is not rendered
body: <p>I have a component that consumes an API and renders a list. Each list item has a custom link to redirect to it's page.</p>
  
  <p>I'm trying to make this route getting the URL params, to show the other component.</p>
  
  <p>But despite the URL changes, the other component is never rendered when I click the list item. But the funny thing is that if I type the URL manually, it renders.</p>
  
  <p>Here goes my code:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
  
  // import Routes from "./routes";
  import Navbar from "./components/Navbar";
  import GlobalStyle from "./styles/global";
  
  import Main from "./pages/Main";
  import Hero from "./pages/Hero";
  import Favorites from "./pages/Favorites";
  
  const App = () =&gt; (
    &lt;Router&gt;
      &lt;GlobalStyle /&gt;
      &lt;Navbar /&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;Link to="/"&gt;Home&lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;Link to="/favorites"&gt;Favoritos&lt;/Link&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;Switch&gt;
        {/* &lt;Main path="/hero/:heroId" component={Hero} /&gt; */}
        &lt;Route path="/hero" component={Hero} /&gt;
        &lt;Route path="/favorites" component={Favorites} /&gt;
        &lt;Route path="/" exact component={Main} /&gt;
  
        {/* &lt;Route path="/hero" render={props =&gt; &lt;Hero {...props} /&gt;} /&gt; */}
      &lt;/Switch&gt;
    &lt;/Router&gt;
  );
  export default App;
  
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter as Router, Link } from "react-router-dom";
  import api from "../../services/api";
  import md5 from "js-md5";
  
  import { SearchBar, SearchInput, SearchButton, Wrapper } from "./styles";
  
  import Card from "../../components/Card";
  
  export default class Main extends Component {
    constructor(props) {
      super(props);
      this.state = {
        heroes: [],
        search: ""
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    componentDidMount() {
      this.loadHeroes();
    }
  
    componentDidUpdate(prevProps, prevState) {
      if (prevState.searc !== this.state.search) {
        this.loadHeroes();
      }
    }
  
    loadHeroes = async () =&gt; {
      const PUBLIC_KEY = process.env.REACT_APP_PUBLIC;
      const PRIVATE_KEY = process.env.REACT_APP_PRIVATE;
      const timestamp = Number(new Date());
      const hash = md5.create();
      hash.update(timestamp + PRIVATE_KEY + PUBLIC_KEY);
  
      if (this.state.search === "") {
        await api
          .get(`/characters?ts=${timestamp}&amp;apikey=${PUBLIC_KEY}&amp;hash=${hash}`)
          .then(response =&gt;
            this.setState({ heroes: response.data.data.results })
          );
      } else {
        await api
          .get(
            `/characters?nameStartsWith=${this.state.search}&amp;ts=${timestamp}&amp;apikey=${PUBLIC_KEY}&amp;hash=${hash}`
          )
          .then(response =&gt;
            this.setState({ heroes: response.data.data.results })
          );
      }
    };
  
    handleChange(event) {
      this.setState({ search: event.target.value });
    }
  
    handleSubmit(event) {
      console.log("State do search: ", this.state.search);
      event.preventDefault();
    }
  
    render() {
      const { heroes } = this.state;
  
      let filteredHeroes = heroes.filter(
        hero =&gt; hero.name.toLowerCase().indexOf(this.state.search) !== -1
      );
  
      return (
        &lt;div&gt;
          &lt;SearchBar onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;
              Buscar
              &lt;SearchInput
                onChange={this.handleChange}
                type="search"
                value={this.state.search}
              /&gt;
            &lt;/label&gt;
            &lt;SearchButton type="submit" value="Enviar" /&gt;
          &lt;/SearchBar&gt;
  
          &lt;Router&gt;
            &lt;Wrapper&gt;
              {filteredHeroes.map(hero =&gt; {
                return (
                  &lt;Link
                    to={`hero?q=${hero.id}`}
                    style={{ textDecoration: "none" }}
                    key={hero.id}
                  &gt;
                    &lt;Card name={hero.name} thumbnail={hero.thumbnail} /&gt;
                  &lt;/Link&gt;
                );
              })}
            &lt;/Wrapper&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p><strong>Hero.js</strong></p>
  
  <pre><code>import React from "react";
  
  const Hero = props =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;{props.name}&lt;/h1&gt;
  
        &lt;article&gt;
          &lt;p&gt;
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima
            accusamus ducimus qui amet quis? Non rerum consequuntur soluta,
            voluptatum blanditiis explicabo, laudantium architecto distinctio enim
            aliquid placeat, quaerat voluptas totam!
          &lt;/p&gt;
        &lt;/article&gt;
      &lt;/div&gt;
    );
  };
  
  export default Hero;
  
  </code></pre>