React Single Page Applications Part 2

In this tutorial, you will integrate the DishdetailComponent into your single page application. You will use a route parameter in the URL to pass in the details of the selected dish to the DishdetailComponent. At the end of this tutorial, you will be able to:

• Configure the routes in your React router configuration to enable the use of route parameters within the URL to pass information to a component.

Updating to Use Parameters on Routes

• Open MenuComponent.js and add the following changes to it to enable the information about the selected dish to be passed to the DishdetailComponent:

• Open MainComponent.js and update it as follows:

Updating DishDetail Component

• Open DishdetailComponent.js and update it as follows:

Adding Breadcrumbs to ContactComponent

• Open ContactComponent.js and add Breadcrumbs to it as follows:

(source: Front-End Web Development with React on Coursera)