title: getting issue while working with nested routes in react
body: <p>I am getting issues while rendering contact data.</p>
  <p>Here the case is when I click the continue button in my app it triggers the <code>checkoutContinuedHandler()</code> function that results in a change of URL but the <code>ContactData</code> component is not rendered and my <code>CheckoutSummary</code> component also vanishes as I am rendering it on the same page.</p>
  <p>I Checked twice that export is done and there is no spelling mistakes.
  I tried different solutions from the stack and discussed them with my mate still the issue is on...</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Route } from &quot;react-router-dom&quot;;
  
  import CheckoutSummary from &quot;../../components/Order/CheckoutSummary/CheckoutSummary&quot;;
  import ContactData from &quot;./ContactData/ContactData&quot;;
  
  class Checkout extends Component {
    state = {
      ingredients: {
        salad: 1,
        meat: 1,
        cheese: 1,
        bacon: 1,
      },
    };
  
    componentDidMount() {
      const query = new URLSearchParams(this.props.location.search);
      const ingredients = {};
      for (let param of query.entries()) {
        // ['salad','1']
        ingredients[param[0]] = +param[1];
      }
      this.setState({ ingredients: ingredients });
    }
  
    checkoutCancelledHandler = () =&gt; {
      this.props.history.goBack();
    };
  
    checkoutContinuedHandler = () =&gt; {
      this.props.history.replace(&quot;/checkout/contact-data&quot;);
      console.log(this);
    };
    render() {
      return (
        &lt;div&gt;
          &lt;CheckoutSummary
            ingredients={this.state.ingredients}
            checkoutCancelled={this.checkoutCancelledHandler}
            checkoutContinued={this.checkoutContinuedHandler}
          /&gt;
          &lt;Route
            path={this.props.match.path + &quot;/contact-data&quot;}
            component={ContactData}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Checkout;
  </code></pre>