In the last section we put together our first route to specify the connection between the current route
that a user is visiting inside the browser and the component to show on the screen.
We're now going to continue by adding in two new routes.
One for our dashboard and one for the survey new components.
Remember over time we're going to replace each of these with the actual components that we want to use
inside of our application.
But for right now we're just doing some initial route setup.
So we kind of get this infrastructure in place for now.
OK so before you just start throwing the routes in there I want to remind you that at present whenever
a user goes to our route route we want to see the landing component on the screen.
And yes we want to see if the header will come back to that very shortly.
Then when we want to see that dashboard component on the screen we should be out the route slash service.
And then finally for Surveys slash new we want to see the survey form or survey new is what we actually
called it let's just call it Survey new because that's what we actually called it inside of our jails
file.
OK.
So let's set up these additional router configuration objects and just kind of see what happens.
So we're going to go back over to my apt G-S file which is where we're going to locate all of our routing
logic and underneath the existing routes I'm going to add on another route definition that's going to
show our dashboard component.
Now really important I want to make sure that you are placing the next route underneath the existing
one.
OK.
So I can place a route where the path slash surveys and remember whenever a user goes to slash surveys
I want to show the component type o components.
I want to show the component dashboard like so OK.
So let's now test this out inside the browser.
When I flip on over I get my automatic refresh.
Any second now.
OK.
There it goes.
And now when it refreshes I'm going to expect to only see the landing component on the screen and it
looks like I do because I'm still at my route route of just essentially forward slash.
That's how we interpret localhost 3000 react rather assumes that is equivalent to just forward slash.
And it looks for a route with a path equal to just forward slash.
So now he want to test out these surveys route.
So slash surveys when we go there we should only see the dashboard component on the screen.
So going to flip back over I'm going to go to localhost 3000 slash dashboard or see me Slash surveys
my mistake.
We'll go there.
And then we're going to expect to see only the words dashboard on the screen.
But when we do however you'll notice that we get both landing and dashboard.
So we are looking at both components here on the screen even though we are out the route slash service.
So this is obviously not desirable.
We do not want this behavior here if we stick with that behavior right there.
That means that whenever a user goes to their dashboard like this thing right here that shows them a
list of all the different services they have.
They will also see some marketing content on here because we're currently also showing them the landing
component.
So obviously something is not quite working the way we expect.
Even though we went to this route slash surveys we're still seeing both sets of components.
So why is this happening.
Well it's pretty straightforward at least from re-act routers consideration or re-act routers perspective
when ever re-act rudder decides what set of components to show on the screen.
It's going to take the current you are l and then try to match every single route and every single path
to the current you are out or the current route.
So let's look at our current route the current route is slash service.
So re-act router is going to take the string slash service so it essentially takes slash surveys and
it's holding it in memory.
It then looks at all the different routes that are defined inside the application.
It says hate route number one.
Does your path contain a string.
Or does your is your path a string that is contained within the route slash service.
That's the rule.
It says Is your path contained in the string slash surveys.
So if we were to say hey is slash contained within slash surveys the answer would be yes unequivocally.
Slash is contained in slash surveys.
It is the first character in that string slash is contained within that string.
And so re-act router assumes that you want to show the landing component reactor order then says hey
second route is your path of slash surveys contained in the string slash surveys and the obvious answer
in that case is yes it is also contained.
So in re-act router decides what set of components to show on the screen it kind of like you could say
greedily matches the path it takes every different path and says Does this exist in the current u r
u r l.
If it does show the component and that's why we are currently seeing both landing and dashboard on the
screen but it's also why when we go back to just localhost 3000 we only see the landing because it looks
almost 3000.
The current route is slash and so slash matches with path number one but not number two.
So how do we fix this.
Obviously not quite desired behavior.
We really want to make sure that this route is only showed on the screen exactly when the path is forward
slash like exactly forward slash.
And so that word exact is kind of the key word here.
That's the that's the trick we're going to pass an additional property to the route component of exact
when we pass an exact.
That basically means hey reactor rudder when you're comparing paths.
Make sure you use exactly this path like the current route.
Must be exactly forward slash.
In order for you to show the landing component.
So essentially we pass an exact of true and that says make sure that the current you are l is exactly
slash.
If you're going to show landing.
So let's test this out.
I'll save the file I'll flip back over to the browser.
There is the refresh.
Now again we only have landing that's to be expected.
But when we go to slash surveys we now only see the dashboard component on the screen which is definitely
what we really truly expect to have happen.
OK.
So that's pretty much it for very basic configuration of routes and the very last thing I want to tell
you about is a little bit of a trick with GSX.
You'll notice that we passed in a prop of true right here which essentially says yes I want you to consider
the path exactly and not just kind of greedily match it now rather than passing in equals.
True like this right here.
We can use a little bit of a trick with GSX.
We're going to remove the equals true part and just leave.
Exactly like so.
So between equals true and just the name.
Exactly.
Here the two are treated equivalently or exactly the same with GSX.
So if you just pass in a property name right here just the word exact GSX will assume you meant to say
exact equals true.
So if we now save this file and then let the browser refresh we'll see that it still works the way we
expect.
We still only see the dash work component when we are on the route slash surveys.
And so I'll do my refresh.
And again we only see dashboard on the screen with a slightly more compact Deus Ex statement here slightly
more syntax friendly of just exact by itself.
OK.
So that's pretty much it.
Now the last thing we have to take care of is these survey new and the header components.
So let's take a quick break and address both of those in the next section.
I'll see you in just a second.