title: React-router-dom - Link change url but does not render
body: <p>I'm new to React and I've made a <code>&lt;Link&gt;</code>to go to next or previous item from dy datas(for example, if i am on user/2 view, previous link go to user/1 and next link go to user/3), the url is correctly changed but the component is not rendered at all and the datas are not reloaded at all. </p>
  
  <p>I've read that it's due to the component not detecting that the children is not changing state so the parent component does not render.</p>
  
  <p>I've tried to use <code>withRouter</code> but I've got a error : <code>You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt;</code> and I'm not understanding what I'm doing so if someone has the solution and some explanation to it I would be grateful :) </p>
  
  <p>App.js : </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Route,
    Switch,
    withRouter,
  } from 'react-router-dom';
  
  
  import HomePage from './pages/home';
  import SinglePage from './pages/single';
  
  class App extends Component {
  
  
  
    render() {
  
  
      return (
        &lt;Switch&gt;
          &lt;div&gt;
            &lt;Route exact path="/" component={HomePage} /&gt;
            &lt;Route path="/:id" component={SinglePage} /&gt;
          &lt;/div&gt;
        &lt;/Switch&gt;
      );
    }
  }
  
  export default withRouter(App);
  </code></pre>
  
  <p>Single.js :</p>
  
  <pre><code>import React, { Component } from 'react';
  import Details from '../components/details'
  import Header from '../components/header'
  import { ProgressBar } from 'react-materialize';
  
  class SinglePage extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        data: { data: null },
      }
    }
  
      componentDidMount() {
          fetch(`http://localhost:1337/${this.props.match.params.id}`)
        .then((res) =&gt; res.json())
        .then((json) =&gt; {
          this.setState({
            data: json,
          });
        });
      }
  
    render() {
  
      const { data } = this.state;
  
      return (
  
        &lt;div&gt;
  
          &lt;h2&gt; SinglePage &lt;/h2&gt;
  
          {!data ? (
            &lt;ProgressBar /&gt;
          ) : (
            &lt;div&gt;
              &lt;Header id={this.props.match.params.id} /&gt;
              &lt;Details item={data} /&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      );
    }
  
  }
  
  export default SinglePage;
  </code></pre>
  
  <p>Header.js : </p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { Link, withRouter } from 'react-router-dom';
  
  class Header extends Component {
  
    static propTypes = {
      item: PropTypes.shape({
        data: PropTypes.string.isRequired,
      }).isRequired,
    }
  
      render() {
          const prev = parseInt(this.props.id) - 1
          const next = parseInt(this.props.id) + 1
  
          return (
              &lt;div&gt;
                  &lt;Link to="/"&gt; Retour &lt;/Link&gt;
                  &lt;Link to={`/${prev}`}&gt; Précédent &lt;/Link&gt;
                  &lt;Link to={`/${next}`}&gt; Suivant &lt;/Link&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Header;
  </code></pre>