In the last video we did a little bit of setup in our application and now we're ready to start learning
about navigation to get started with navigation.
We're going to install a dependency called re-act router.
We're going to first install this dependency from our terminal and we'll will very quickly start talking
about exactly what it does at my terminal.
I'm going to stop my running server with Control-C and then I will install re-act router with NPM install
the dash save re-act router Dom.
Now this is really important.
Make sure you get the dash dom on there right.
So I'm going to hit enter.
I'm going to go through the installation process and while that's going I first want to tell you a little
bit about why we just installed something called react rather dumb as opposed to something called re-act
router which you might have expected.
All right so a quick diagram over here so in of the re-act router family of libraries there's a couple
of different dependencies that you could possibly install now you will very commonly make a typo or
at least do.
I very frequently personally always accidentally install the re-act router library but it turns out
we never actually want to install re-act router by itself.
The re-act router library as it is published on NPM is the core library of everything inside the reactor.
General project.
So this library right here has some Kord navigation logic inside of it.
It decides how to work with re-act how to change content out depending upon some different rules and
some other low level logic to get an actual implementation of re-act router that works inside of specifically
the browser.
We install the package re-act router Dom and that's what we just installed two seconds ago.
So any time that you want to use re-act router on a project to handle navigation as we are about to
do you're always going to be installing this project called re-act router dumb and you are not going
to install re-act router now just so you know there are some other very similarly named projects you
might think that you need as well.
There's another one called re-act router native.
This is a routing library for use in sight of re-act native projects.
In our case for what we're doing inside this course we're making web applications so we make use of
re-act router Dom.
We are not making native mobile apps re-act router native right here is for native mobile applications
so it's not appropriate for anything that we are doing inside the browser.
If you're making an application it's going to run inside the browser.
You always want re-act Rotterdam as opposed to react native.
You usually don't want re-act native unless you really know you do.
Now finally there's one other package that you might really think is relevant to what we're doing is
called re-act router redux.
This is a library that is very similar to the reacts redux library that we've been using in our past
few applications.
It is essentially a compatibility layer to get re-act router and redux to play along with each other
very nicely.
Now in this course you and I are not going to make use of re-act router redux So we are not going to
use this library right here.
It is 100 percent not necessary and in general I personally recommend that you do not use it.
In fact even the authors of reactor ordered themselves inside the official documentation do not recommend
that you tried to keep track of stuff in site of redux related to navigation.
So this is more of a if you really think you need it.
You can go and try it but in general it's better to just kind of even ignore that it exists.
Ok so I can flip back over to my terminal.
It looks like I successfully installed re-act router dom so I going to start my project back up with
NPM start and then after I get that back up I'm going to flip back over to my code editor then at the
top of this file.
I'm going to import a couple of different properties or different things from this re-act Rotterdam
library.
So underneath my import re-act I'll say import browser router and route from re-act router Dom.
Now this is another thing to keep in mind here.
Make sure that you're putting reactor at or dom here.
I can guarantee you almost without a doubt that at some point inside this application you're going to
accidentally type re-act router.
But in every case for this application we are always going to write out re-act rodder done.
Now normally as you well know from going through a lot of content in this course.
Usually I explain things with a ton of diagrams but re-act router is actually one instance where it
is so much easier to just show you a quick example to help you understand exactly how it works.
So we're just going to very quickly write up a quick example with re-act Rotterdam to help you get a
better sense of what's going on.
All right.
To get started with this quick little example we're going to write some code into this file that we're
going to delete very quickly once we get a better idea of how this thing is behaving.
So up above my app component I'm going to make two other kind of dummy little components just like stand
in things.
So inside of my file I'm going to say Konst page one is going to be a functional component that returns
a div with the text.
Page 1 and then I'm going to copy paste that down and then for the second copy I'm going to change it
to say Page 2 instead.
Then inside of my app component I'm going to turn this into a multi-line GSX block.
Inside of the div I'm going to place an instance of this browser router right here your browser router
is an actual re-act component.
We'll talk about exactly what is doing just a moment.
But like I said it's a lot easier to show than to explain.
In this particular case.
So inside the div right here I'm going to place browser router
and then inside of there I'm going to put a route on the route I'm going to pass in a prop that says
path forward slash like so inside of a string.
After that I'll put in the key word exact on it's own.
No assignment here so we're not going to say exact equals something or anything like that I'm just going
to put the word exact.
And then finally I'll say component I'll put down my curly braces to indicate that I want to reference
a javascript variable inside of some GSX and I'm going to put in there page 1 like so.
And then after that I'm going to put another route for this one I'm going to say slash page to I'm not
going to put the exact keyword this time in it'll put in just component age 2.
Now I'll close off that tag as well.
All right.
So we now have a browser router.
We have two routes.
We have two paths.
We have one X X and two components like so.
So I'm not going to save this and we're going to flip back to the browser is going to see what happens
after we observe some interesting behavior.
We'll have a long discussion to talk about exactly how re-act router is working behind the scenes for
us and what it's going to really do inside of our project.
All right.
So I can flip back over.
I made a little mistake I forgot one little element here.
So inside of the browser router I'm going to wrap both those routes with the div like so my mistake
while I kind of broke the free flow here.
But we'll fix that up really quickly.
So going to save that and then flip back over.
OK so now successfully without any error message I see Page 1 appear on the screen.
Now very interestingly I'm going to change my address bar up here I'm going to go to a local host on
three thousand splash page too like so now I see the text page to appear on the screen.
Now just to make things a little bit more interesting than this I'm going to go to my page to component
and I'll put say a button tag inside of your that says something like click me like so and I'll save
that and we'll flip back over.
And now I see on page two I see that button.
But if I go back to just local home 3000 I still see that page one component appear.
OK.
So what we see here is a very simple example of what re-act rodders is doing.
And so I think that you can kind of understand based upon the you are ill we are seeing some different
content on the screen.
Let's take a pause right here.
When we come back the next video we're going to break down this little example into its little component
parts so to speak.
And we'll talk about what re-act writer is doing for us.
So a quick pauses I'll see you in just a minute.