load component dynamically

checkoutCancelledHandler = () => {

this.props.history.goBack();

};

checkoutContinuedHandler = () => {

this.props.history.replace('/checkout/contact-data');

};

render() {

return (

<div>

<CheckoutSummary

ingredients={this.state.ingredients}

checkoutCancelled={this.checkoutCancelledHandler}

checkoutContinued={this.checkoutContinuedHandler}

/>

<Route

path={this.props.match.path + '/contact-data'}

render={props => (

<ContactData

ingredients={this.state.ingredients}

price={this.state.price}

{...props}

/>

)}

/>

</div>

);

}


======when using redux, no need to pass props

checkoutCancelledHandler = () => {

this.props.history.goBack();

};

checkoutContinuedHandler = () => {

this.props.history.replace('/checkout/contact-data');

};

render() {

return (

<div>

<CheckoutSummary

ingredients={this.props.ings}

checkoutCancelled={this.checkoutCancelledHandler}

checkoutContinued={this.checkoutContinuedHandler}

/>

<Route

path={this.props.match.path + '/contact-data'}

component={ContactData}

/>

</div>

);

}