title: URL change without re rendering in React router
body: <p>I am working on an application where I need to change the url of the page without causing a re-render.</p>
  <p>I am making a call to fetch all the pages inside componentDidMount like this</p>
  <pre><code>componentDidMount() {    
      axios.get('/pages')
        .then(response =&gt; {
          this.setState({
            pages: response.data,
            slugs: response.data.pages.map(item =&gt; Slug(item.title))
          })
        })
  </code></pre>
  <p>Once I have all the pages then I want to show the individual pages.
  For eg. in the url it has to be like <code>/page/1/slug-for-page-1</code> and <code>/page/2/slug-for-page-2</code> based on a state variable <code>activePageNumber</code> and the active page content will be displayed. Also the corresponding slug should be there on the url.</p>
  <p>I tried adding a callback after setState like below, but it didn't work.</p>
  <pre><code>() =&gt; this.props.history.push({
            pathName: '/page',
            state: {activePageNumber : activePageNumber},
          })
  </code></pre>
  <p>I thought of adding a child component to manage the activePageNumber state, but I am not sure if its the best way to do it and whether it'll prevent the re-render.</p>
  <p>I can implement it such that each page make a separate request to the backend, but I wish to call it only once, and then update the url based on the active page number.</p>
  <p>I am not sure how to implement this in react.</p>
  <p>I have the following versions</p>
  <blockquote>
  <p>&quot;react-router-dom&quot;: &quot;^5.0.0&quot;</p>
  <p>&quot;react&quot;: &quot;^16.8.6&quot;</p>
  </blockquote>