title: React - Link redirect to item but not refresh the component
body: <p>When I click StageItem 'Details', URL is being changed but Stage component not refresh the data. I was trying to use Switch and withRouter, without success, because I completely don't know how to use these in my case. Thanks in advance for answers. My code:</p>
  
  <p>App</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
          &lt;BrowserRouter&gt;
            &lt;div className="App"&gt;
              &lt;Header/&gt;
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;Route path='/' component={InputContainer}/&gt;
                      &lt;Route path='/' component={() =&gt; &lt;StagesList todos={this.props.todos}/&gt;} /&gt;
                      &lt;Route path='/:stage_id' render={(props) =&gt; &lt;Stage {...props} todos={this.props.todos}/&gt;} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          todos: state.todos
      };
  };
  
  const mapDispatchToProps = {};
  
  export const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>
  
  <p>StageItem</p>
  
  <pre><code>export const StageItem = ({ todo, id, handleRemoveTodo}) =&gt; {
  
      return(
          &lt;li className="stage_item" key={id}&gt;&lt;span onClick={() =&gt; handleRemoveTodo(id)}&gt;&lt;FontAwesomeIcon className="fa" icon="trash" /&gt;&amp;nbsp;{todo.tour} - {todo.duration.hours}:{String(todo.duration.minutes).padStart(2,"0")}:{String(todo.duration.seconds).padStart(2,"0")} - {todo.distance} km - {todo.avgSpeed} km/h - {todo.maxSpeed} km/h&lt;/span&gt;&lt;Link to={'/'+todo.id}&gt;Details&lt;/Link&gt;&lt;/li&gt;
      )
  
  };
  </code></pre>
  
  <p>StagesList</p>
  
  <pre><code>export class StagesListC extends React.Component{
  
      render(){
  
          return(
              &lt;div className="col-12 col-sm-12 col-md-12 col-lg-12"&gt;
                  &lt;SectionTitle title="Stage list"/&gt;
                  {this.props.todos.length&gt;0 ?
                  &lt;ul className="todo-list"&gt;
                      {this.props.todos.map((todo) =&gt; &lt;StageItem
                          key={todo.id}
                          id = {todo.id}
                          todo={todo}
                          handleRemoveTodo = {this.props.handleRemoveTodo}
                      /&gt;)}
                  &lt;/ul&gt;
                  :
                  &lt;div&gt;You have no stages&lt;/div&gt;}
              &lt;/div&gt;
          )
      }
  
  }
  
  const mapStateToProps = dispatch =&gt; bindActionCreators({
      handleRemoveTodo
  }, dispatch)
  
  const mapDispatchToProps = { handleRemoveTodo };
  
  export const StagesList = connect(mapStateToProps, mapDispatchToProps)(StagesListC);
  </code></pre>
  
  <p>Full project: <a href="https://www.dropbox.com/s/olg4m8ftqbbvidn/App%20new%205.zip?dl=0" rel="nofollow noreferrer">Link</a></p>