In the last video we scaffold it out a couple of different components.
And so now we want to make sure that we hook them all out to different routes to be shown inside of
our app.
JS file now the first thing we do is do a little bit of cleanup inside of your site and going to delete
the existing page one and Page two components.
So here's page 1.
I'm going to delete it.
And here's page two.
I'm going to delete it as well.
And then I'm going to delete the two route definitions that we have for each of those.
Then at the top I'm going to add on import statements for each the different files we just created.
So I going to add in five imports in total so I'm going to do stream create from streams stream create
and then I'll copy paste that down four times just to save a little bit of time.
So next I'll do stream edit or do stream delete stream lists and stream show like so.
So I should see create edit delete list show and on the right hand side to create edit delete list show
it's now we can create separate routes for each of these.
So inside that div
I'll add on a route I'll give this first one a path of four it's slash.
Remember we had said that whenever a user goes to the route I want to show the stream list component.
So let's say patho for its slash.
I'm going to use the exact keyword so I do not accidently match one of these other routes and I'll say
my component is going to be stream list and I'll close the route off.
So I'll copy this one down for the next one.
I will do.
How about let's just go by this diagram right here so I'll do stream create next.
I want to have a path of slash streams slash new.
So I'll do streams slash new and I'm going to collapse my site barges so we can see the entire line
so do stream create.
Next up I want to do streams so do streams at it now will be stream edit as my component next I'm going
to do streams delete
and I'll do streams or stream delete.
And then finally I'll do streams show.
All right so that's it.
I guess I have my five route definitions right here.
So double check your paths on each one and double check your component names as well.
Make sure that you did not accidentally put in a s after the word stream.
Inside of all the component names.
So once you've got that all put together we will save this file and then we will test it out inside
the browser.
Now when you flip over to your browser it is incredibly possible that you might have made a typo.
And so you might see an error message over here.
If you see an error message at this point please read the error message very closely.
It will tell you exactly what you did wrong.
Chances are you accidentally imported something incorrectly or you might've misspelled a variable name.
At any rate I can just about guarantee you that you have a small typo at someplace inside of your code.
If you are seeing an error message very quickly we're going to test out all these different routes that
we have added into our application so I get to first go to localhost three thousand and I should see
stream list next.
I can go to three thousand streams.
Slash knew I should see stream create or go to 3000 slash streams slash at it.
I should see stream at it.
I should be able to go to show c streams show and finally Asheville to go to streams slash delete and
see stream delete.
So that's all five of them tested in very quick succession.
All right.
So like I said we just went through this little scaffolding process to save us time because otherwise
there would have been like 5 sections in the future.
I said OK let's create a new route definition right and that would have been got that would be tiring
really quickly without a doubt.
So now that we've got all of our routes put together let's take a quick Faas right here and we will
continue in the next video.