A lot of suction we handle a little bit more of that configuration inside of our application.
We added on the slash surveys component we figured out the difference between adding a route with exact
as a prop and leaving off exact.
So remember in general you usually probably want to have exact but you might have an application where
you do want to greedily match.
And so it's really left as an option up to you to decide whether or not the route should use the exact
proper here.
Now the next thing we're going to take care of is making sure that we can see both the serving new and
the header components on the screen as well.
We'll first take care of serving them.
Remember that we only want to see this component on the screen.
When ever the user visits the route of slash surveys slash new so I'll flip back on over and we're going
to add on an additional route underneath the existing one with a path of slash surveys slash in it.
And then whenever you as a user goes there I want to show the component survey now.
So survey new like so.
OK.
So I want you to now consider I want you to ask yourself the question.
Does the dashboard component here or does the survey a new component here need to also have a prop of
exact won't you just kind of think about that for a second and while you do.
We're going to test out this new route of slash surveys slash new.
So go back over to the browser or go back to our running application and I'm now going to manually navigate
over to slash surveys slash new like so and when I do so.
Yup sure enough we see both the dashboard and the survey new components which are definitely not where
we expect to have happen when I got a slash survey slash new I only want to see survey new I don't want
to see the dashboard.
And so as you might guess this is another case of greedily matching the route by re-act router so reactor
routers says OK the route is slash surveys slash new it looks at the first route.
It says OK I need to exactly maps the route is forward slash exactly equal to slash service slash new.
It says no.
It then goes to the next one and says is the string slash surveys contained within surveys slash new
it says yes.
And so it decides to show the dashboard component.
So long story short.
Yes we do also have to add on exact to this route as well.
So add on exact and now it should behave more in the way we expect.
Now at this point we really just have these three components right here.
I don't really need to add on the exact property name to this route.
I certainly could.
It won't harm anything.
There's no harm in it.
I certainly could add that on.
But I don't strictly need to because there's no other route or no other path inside of application that
a user might go to that has the string survey slash knew in it.
So I really don't have to add on exact here but there would certainly be no harm if I did.
So now when we flip back over to the browser it looks like the refresh already kicked in.
I met slash surveys slash new and I only see the survey new component on the screen.
OK.
So this is working out pretty well.
I think that the very last thing that we're going to take care of is to make sure that we can always
no matter what.
Always see the header component on the screen.
That's the last thing that we need to take care of.
So here's the great thing about re-act router.
It treats these routes like special children or special objects that it needs to evaluate and say hey
do I need to show this thing on the screen.
But other than that they are treated as normal re-act components normal Riak components and what I really
mean by that is we can treat them like any other component inside of our project.
We can put normal components like normal text above in-between after like normal text.
Other components buttons anchor tags whatever else we want.
Or it can be freely nested among all these different routes.
And so long story short in order to get our head or to also appear on the screen and make sure that
it is visible at all times we can just pass it or assign it at the very top.
Above all these other routes and so that means that the header will always be displayed no matter what
because notice that it's not tied to any specific configuration.
And reactor writer will always make sure that the header is visible and then it will place any other
respective or relevant route on the screen.
So that's pretty much it.
And that's how we take care of showing a component at all times with re-act router.
We just treat it like any other component.
So now if I save the application and flip back over we're going to see the header appear at the very
top when we're at survey new.
If we go to just slash surveys we'll still see the header on the dashboard and if we go to just slash
we'll see both the header and the landing screen as well.
Now of course we also want to make sure that the content inside the header gets customize based on whether
or not the user is logged in.
But that is a completely separate consideration.
The content in the header is determined by a certain piece of data inside of or react and redux really
are redux store the content that should be visible on the screen at all is visible depending on the
route.
And that means that it falls underneath the responsibility of re-act router.
So now that we've got re-act router at least initially setup and initially put together let's continue
in the next section where we're going to start to break the head or component out to a separate component
and we'll also make sure that we have some ability of deciding whether or not the user is truly logged
in when they first visit our application.
So let's continue in the next section and continue on.