link from react-router-dom because
I'm going to use that in constructing the Breadcrumb here.
So, I will also import Breadcrumb, BreadcrumbItem.
I will add Breadcrumbs to the dish that I render here also.
Now, I'll go in and come into the details here, down below here.
And so here, when I say, "RenderDish",
I will parse in the props.dish here.
And then here, when I say,
"RenderComments" I was parsing this in as
props.dish.comment because comments were part of the dish earlier.
Now, since comments are coming separately on their own,
I can just change it to props.comments
and then that'll parse the comments in to render comment.
So, the render comment should work just like before and
the props.dish should work just like before.
Now, having done this,
let's add in the Breadcrumb to this.
So, how do you add in a Breadcrumb to this?
So, in here let me go in and then indent this here.
Now, I'm going to go into the CenuComponent and then
copy this Breadcrumbs from the MenuComponent,
to save myself the trouble of having to type all these things here,
and then come into the DishDetail component.
And then right here, inside the container,
I will paste in those Breadcrumb items
there and then we'll fix up the Breadcrumb items to render these things.
So here, it says Breadcrumb link to home,
and then the BreadcrumbItem active.
Now instead of menu here,
I'm going to here render prop.dish.name.
So, you see the props.dish contains my dish and then so I'm going to use
the dishes name here in the Breadcrumb.
And similarly here, also this menu,
I will replace that with props.dish.name.
So, at the top,
the titles would be the name of the dish itself as the title.
Now, in addition to this,
here we have one link to the home.
We will add in one more link to the menu here.
So, we'll say link
to menu, and menu.
So, that'll take us back to the menu here.
Actually, I don't want to send you back to home from the details of the dish.
I wanted to send you back only to the menu.
So, the breakfast BreadcrumbItem will only render slash menu.
So you'll be able to go back to the menu from
the details of the dish here, which is fine.
So with these changes,
now my DishDetail component is also updated appropriately.
Now, I will also add in the Breadcrumb to the ContactComponent.
So, going to the ContactComponent,
I'm going to import
Breadcrumb.
Again, this I import from reactstrap.
We'll import Breadcrumb and then BreadcrumbItem, sorry.
So, this should be Breadcrumb with a small c. This would be BreadcrumbItem.
Both of these, I will import from reactstrap.
And within the ContactComponent, before I fix that,
let me just go to the MenuComponent and just copy
this all over again from the MenuComponent,
come back to the contact component.
And inside the container,
I'm just go to reinsert that into place.
Save myself the trouble of having to type this thing again,
and then we'll just go and fix that up to render the appropriate text.
So, Beadcrumb link to home,
and this is Contact Us, Contact US here.
And one more thing to import here
is link from
react-router-dom.
Save all the changes and then look at our application.
Coming back to our application in the browser,
you can see that the home component is rendered as such.
Let's go to the contact component.
And when you go to the Contact component,
you can see the Breadcrumb being rendered at the top here and
then the contact us title being rendered here.
There is a line separating the Contact Us from the rest of the code here.
So, that is how the Contact Us is rendered.
Let's go to the menu.
So, in the menu,
you can see that you have a Breadcrumb item and the menu being rendered here,
and then each of these is now turned into a link here.
So let's click on this one to see the details.
So now when you click on that,
you notice that you have now gone into
this new view here where the details of the dish is rendered.
This is still the DishDetail component that is rendering the thing,
so I haven't changed much in the code there minor fix to
that code and then the DishDetail component is rendering the menu.
Look at the URL here.
So, notice how the URL says, /menu/1,
1 being the ID of this particular dish.
So, you see how the URL with
route parameters can be used to route to a specific dish item.
So here, again I can click on Menu and go back to the menu here,
and then I can click on another dish and then come
back to the details of that specific dish here.
I can go back to the menu item and then go back to home.
So, now our Single Page Application is almost complete except for the About Us page.
That is second assignment for you.
With this, we complete this exercise.
So, in this exercise,
we have seen how we can use our parameters to pass information
to our React router which enables us to render
a dish and so the information about the route parameter can be passed into that dish
or rather passed into each component and then
used there to appropriately render the view.
With this, we complete this exercise.
This is a good time for you to do a good comment with
the message Single Page Applications part two.