In the less section we discussed why authentication is going to make a difference and exactly how our
application behaves.
We're not going to continue by tackling some of our re-act router setup and getting some different components
to display on the screen depending on what route a user is currently visiting.
After we do this initial setup of routes will then be able to add some different logic that toggles
what a user is able to access inside of our application.
So again I've said this Farleigh three times now if you're in this course kind of assuming that you
know re-act kind of assume you know redux reactor router.
Yeah I kind of assume you're somewhat familiar with that as well.
But I'm going to cover re-act rudder assuming that you know very little or at least have never really
used it in a large application.
So let's get to it.
The first thing I want to talk to you about regarding re-act router is I want to again point out to
you that based on the route that a user is visiting inside of our application we want to show different
content on the screen.
So for the landing page over here if the user is at this route like email dot com slash I want to show
our landing page or essentially some marketing stuff that tells our users exactly what this application
is for when a user then navigates to the route.
Email dot com slash surveys.
I then want to show some different set of components on the screen and then the same thing for Surveys
slash new as well.
So we're going to set up a couple different routes inside of our application.
A route is a pairing or kind of a rule you can think of between the address that user is looking at
and the components that should be displayed on the screen at any given time.
So let's flip over to our code editor and we're going to start doing some the setup with re-act router
we're going to put all the configuration around the different navigation states of our application into
the app G-S file.
Remember the update js file is really responsible for all that initial due layer set up whereas our
top level index J.S. file is responsible for all of our redux setup where all that kind of data set
up of our application.
So inside the data file We're going to start off by first importing the re-act router Dom library.
So at the top we'll import and we're going to put it crudely brace there right now from re-act dash
router dash DOM like so now if you've used earlier versions of re-act router like version 2 or Version
3 that's totally fine.
You might notice that the library name here has changed just to let a little bit.
So there's now three distinct re-act Radford libraries.
There's re-act rather Domm which is what we're using right here reactor outer Dohm contains a set of
reactor outer helper's specifically themed around allowing you to navigate around the dorm or at least
an environment that uses the browser Dom.
There's also re-act rather native which is for use with re-act native and there's also the core re-act
router library.
The core re-act router library Shamash contains some logic that is shared between both re-act Rotterdam
and the reactor at her native libraries.
In the end in practice at this point all we really ever care about and I'm talking about like any application
we probably ever work on we really just care about re-act router Dom and we don't really have to worry
about those other two at all.
And now the reactor router DHand library exports a couple of different helpers that we're going to want
to import into this file or at least I should say just to add this file.
The first thing that we're going to import is an object called browser router.
And the second is an object called route like so the browser router can be thought of as the brains
of re-act router is the thing that tells reactor router how to behave is the thing that looks at the
current you are l and then changes a set of components that are visible on the screen at any given time.
The route object right here is a re-act component that is used to set up a rule between a certain route
that the user might visit inside an application and a set of components that will be actually visible
on the screen.
In practice I think that setting some of these things up is not really the worst thing in the world.
So let's go through some initial set up here with some kind of dummy test components and we'll get a
much better idea of what's going on.
OK.
So again I want to first do a little bit of setup with just some dummy components after we do these
dummy components will then come back later on and create real versions of each of the components we're
going to make be making use of.
So we'll first create a couple of dummy components right above the app one.
So I want to make a dummy component called header.
This is going to be a functional component that's going to return a div and you know what let's make
this nice and big let's make it like an H2 and it's going to contain an age two with the text header.
And I'm going to repeat this same exact process three more times for the second one.
I'm going to change the text to the dashboard dashboard.
I want a survey a new survey new and then I want a landing as well.
OK.
So again we're going to get some dummy components like these right here working together nicely with
re-act router and then over time we'll come back and replace each of these with a very real component
that we create inside of our application.
Now before we dive really into how we use these two objects the browser router and the route I think
that will take a quick break so that this section doesn't run on too long.
When we come back we're going to make use of these helpers from reactor out her door.
Along with these dummy components to get some content to show up inside of our application.
So quick break and I'll see you right back here in just one minute.