We spent quite a bit of time talking about exactly how we're going to build this application.
So some of them actually put pen to paper and start writing some code.
Let's get started by opening up our code editor and starting up our development server.
I've already opened up my own code editor so I'm going to start up the server by running NPM run start
inside of our project directory and then inside of my code editor I'm going to find my index dot js
file inside of the SIRC directory and open it up.
OK so the first thing I want to do is I want to just play around a little bit with re-act router.
The end goal I want to have just inside the section is to create two different routes that a user can
visit inside of our application.
And based on the route or the URL that the user is visiting I want to see slightly different content
appear on the screen.
So the first thing that we're going to do to make this happen is we're going to create two very small
components that we're just going to make right now and then eventually delete very shortly after.
So inside the index on G-S file right above it the react on Dot render call.
I'm going to create these two separate components that we're just going to use for testing purposes.
We're going to make both of them class based components.
So will say class halo extends react on components and will define just the render method inside of
your.
So we return a div that contains the text Hello.
Now I'm going to duplicate the same exact thing.
Paste it right beneath.
Now I'm going to change the text inside of this to be goodbye.
So I change the class name to goodbye and I change the div inside of it to contain the text goodbye
as well.
OK so those are two very small test components at this point we've done absolutely nothing specific
to react router.
So now we're going to start talking about exactly what we have to add to get react rudder started up
inside of our application.
We're going to first start off by importing a couple of different pieces of code from re-act router
and then we're going to wire each of those up inside the react arm don't render call.
So let's go to the top of the file and get started.
I'm going to flip up to the top of the file and then we're going to add in an import statement.
We're going to import a couple different items from re-act router dom.
The first thing we're going to grab is Browser router.
This browser router object right here is what interacts with the history library and decides exactly
what to do based on a change inside the RL.
The term browser router in particular is saying I want re-act router to look at the entire You Arel
when deciding what different components to show on the screen.
And we'll definitely talk about some of the different aspects of this router later on.
So right now we're going to say that this is a piece of code that interacts with that history library.
The next thing that we're going to import is the route component so route right here is the real workhorse
of all things re-act router.
This real route object right here is a re-act component that we can render inside of any other Riyadh's
component that we put together inside of our application.
The purpose of the router component is to provide that configuration that will say hey if the U r l
looks like this then I want to show this component.
And if the u r l looks like that then I want to show that component.
So again the route object or the route component is all about providing some customization or configuration
to react router.
Now that we've imported these two objects and we've created our two components let's wire them all up
inside the react on that render call at the bottom of the file.
So I'm going to go back down to the bottom of the file.
I'm going to delete the entire app tagged right now.
So I don't want to show the app component at all.
It's going to take it all the way out I'm going to replace it instead with browser router and I'll close
off browser router like so.
Next we're going to create that configuration that I've mentioned a couple of times now by making the
two route components and mapping two instances of the road component up to each of the two test components
that we put together.
So I'm going to create an instance of route and another instance of route.
Now there's two very particular and very important and required properties that we pass through every
single route component that we create.
The first is a prop called path.
And the second is the prop called component path is almost always going to end up being a string.
So it'll be a string that says if the user goes to this route then I want to show this component.
And so in practice the API really does make a lot of sense right.
OK if I go to this particular you Arel or this particular route I want to show this component on the
screen if the route that the user is looking at does not match up with this path right here then.
Hey don't show this component so let's fill out the implementation right here and see what it looks
like inside in practice.
So I got to say that if a user goes to a route called slash.
Hello I want to show the helo component.
And if a user goes to the path Good bye then I want to show the component.
Goodbye.
OK.
So that's really all the setup that we have to do for re-act router to at least be able to test it inside
the browser.
So I'm going to flip over to the browser now.
I've already opened up and navigated to local host AT&T.
So right now if we go to localhost ADHD you might see a big error message on here says that we may only
have one child element.
I made a small mistake we're going to flip back over you see the browser router right here.
So the error message that we just saw said hey you can only have one child element.
And so really what that's saying is we just have to wrap this entire thing with a standard div like
so OK so I just added a divin and it's wrapping both of the two routes that we just defined.
So let's flip back over now or refresh again and you'll notice that absolutely nothing appears on the
screen.
And this actually makes a pretty good amount of sense.
If you look at the code that we have right now we've defined two separate routes and in each route we
said okay if the user goes to slash hello or slash goodbye then show a component.
Otherwise essentially do nothing at all show no content on the screen whatsoever.
So let's try going to one of those two routes and see what happens.
I'm going to go up to the address bar and I'll change it to slash hello and when I do so the application
loads up re-act router looks set to you or L or I should say the History Library looks at you or else
it passes that route over to react router re-act router says OK it looks like the route is slash hello
and that maps up to the helical Hello component.
So I'm going to show hello on the screen.
So in very similar fashion we can also go to good bye and now we show the goodbye component on the screen
instead.
We can navigate to just about any other route you could possibly imagine.
So we can put in some jibberish here and when we do so react riders are just going to say well I don't
know what to do with this route.
I don't have any configuration that matches this jibberish up here.
And so I'm going to decide to just show absolutely nothing at all.
So it's pretty much re-act router in a nutshell.
Whenever we go through the setup process we place the browser router tag and then we define some number
of Route components inside that that pair up or match a given path to a particular component to show
on the screen.
Now if we wanted to if we want to show other content on here maybe a head or something like that we're
still free to mix in as much components or text or anything we could possibly imagine in here along
with these raw components that we've defined.
So maybe if I always want to show a header to the user I could just hardcoded a header right above these
two route components so I can just put in the text that says Hetter.
Let's go to slash alone now.
And I get my head appearing on the screen and the text that says hello.
And if I go to goodbye I still see the header but I also see a goodbye.
So essentially we use that route component to just show or hide a child component depending on the you
Arel.
OK so in this section we've gone over the basics of re-act router with some dummy components.
Just very simple test components.
Let's take a quick break and then we're going to come back and talk about how to apply this new knowledge
to our particular application in the next section.