title: React componentDidUpdate not changing props.match.params on url change?
body: <p>Match.params is not getting updated in <code>componentDidUpdate()</code>. </p>
  
  <p>My route is <code>/sidebar/:id</code> if from <code>sidebar/1</code> I go to <code>sidebar/2</code> the <code>this.props.match.params.id</code> is still showing the <code>id</code> as 1 and not the updated url <code>id</code>  2 within <code>componentDidUpdate()</code></p>
  
  <p>Tried with <code>props.location</code> but still showing the data of old url. </p>
  
  <p>Sidebar page component</p>
  
  <pre><code> componentDidMount () {
      const id  = this.props.match.params.id;
      //fetching some data
  }
  componentDidUpdate(prevProps) {
  
      console.log("Prevprops",prevProps.match.params.id);
      console.log("Cuurent id",this.props.match.params.id);
      //if both ids not same then fetch data again
  }
  </code></pre>
  
  <p>Router </p>
  
  <pre><code>const routes = [
    {
      path: "sidebar/:id",
      component: asyncComponent(() =&gt; import('../sidebarPage')),
    },
  ];
  class AppRouter extends Component {
    render() {
      const { url } = this.props;
   return (
        &lt;div&gt;
          {routes.map(singleRoute =&gt; {
            const { path, exact, ...otherProps } = singleRoute;
            return (
              &lt;Route
                exact={exact === false ? false : true}
                key={singleRoute.path}
                path={`${url}/${singleRoute.path}`}
             /&gt;
            );
  
          })}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Async Component</p>
  
  <pre><code>import React, { Component } from 'react';
  import Nprogress from 'nprogress';
  import ReactPlaceholder from 'react-placeholder';
  import 'nprogress/nprogress.css';
  import 'react-placeholder/lib/reactPlaceholder.css';
  
  export default function asyncComponent(importComponent) {
    class AsyncFunc extends Component {
      constructor(props) {
        super(props);
        this.state = {
          component: null
        };
      }
      componentWillMount() {
        Nprogress.start();
      }
      componentWillUnmount() {
        this.mounted = false;
      }
      async componentDidMount() {
        this.mounted = true;
        const { default: Component } = await importComponent();
        Nprogress.done();
        if (this.mounted) {
          this.setState({
            component: &lt;Component {...this.props} /&gt;
          });
        }
      }
  
      render() {
        const Component = this.state.component || &lt;div /&gt;;
        return (
          &lt;ReactPlaceholder type="text" rows={7} ready={Component !== null}&gt;
            {Component}
          &lt;/ReactPlaceholder&gt;
        );
      }
    }
    return AsyncFunc;
  }
  </code></pre>
  
  <p>I expect when I go from <code>sidebar/1</code> to <code>sidebar/2</code> in <code>componentDidUpdate</code> <code>this.props.match.params.id</code> shows <code>2</code> and <code>prevProps</code> shows <code>1</code>.</p>