We just finished some initial set up of re-act router inside of our index. 2
JS file by importing router and browser history. 3
And we kind of passed off control of rendering our application to our router here. 4
We now need to do one last piece of configuration for Riak Crowder before it's Ashkan do anything for 5
us. 6
We need to tell it what valid routes our application has and the appropriate components to show for 7
each of these routes. 8
So we're going to set these rules up in a separate file from index Dot. 9
Yes. 10
In our source directory over here I'm going to make a new file called routes. 11
JS Zaretsky JS is going to be essentially our mapping of hay for this Ural please show this component 12
. 13
And for this girl please show that component. 14
So we're going to import a couple of packages here at the top to help us define these rules. 15
We'll import re-act from react in poor routes and index routes and we'll talk about what both of these 16
are in just a second from re-act router and then we're also going to import our initial component that 17
we were rendering before the app component. 18
So import app from we're currently in source are going to say that current directory into components 19
and then app so current directory into components. 20
So the round object here is what is the object that we're going to use to define a match between a u 21
r l and a component. 22
We can use index route just yet but we will shortly. 23
So just hold on on index route for now let's put route to use by defining a mapping between a possible 24
route and a component. 25
So to do so all we have to do is write routes path component. 26
And so this matches the path of forward slash to the component of AB. 27
In other words whenever the user is at this path show this component right here. 28
Now you might be saying yourself well forward slash like what you are is that you know what does that 29
mean out to what. 30
How do I navigate there. 31
So forward slash refers to anything or whatever we're looking at say like dot com slash or dot net slash 32
. 33
So for example if we navigated to Google dot com slash that would be equivalent to path equals slash 34
right here. 35
I would say renderers. 36
Oops there you go. 37
So something like just going to our roots domain name like say Google dot com or blog post dot com that 38
has this for Slash in here. 39
And that's the part of the path that react rather curious about. 40
So this would again show our component operate here. 41
OK. 42
So we've got our first round happening here. 43
We've defined a route and it maps a path to showing a particular component. 44
Now we need to basically take this mapping right here. 45
This rule set and makes sure that re-act router back over index dot G-S knows about it. 46
So what we'll do is we will export this rule. 47
So we'll say export default and then we'll wrap our routing here inside of some parentheses. 48
OK so let's go ahead and save this. 49
And now we're going to go back over the index start JS and feed that mapping into our router. 50
So at the top we'll import those routes say import routes from routes and now we need to feed this wrapping 51
into our router. 52
So we'll say routes is routes. 53
Here are the here's the mapping between your Elle's and components that we care about. 54
Please use these. 55
That's all we're saying here. 56
OK. 57
So let's refresh or save this file and pop open our browser and just confirm that this actually works 58
. 59
So I up open my terminal terminal here just in case you get any errors and then refresh and you'll notice 60
that everything looks the same. 61
I'm actually refreshing here but this is actually exactly what we want. 62
I'm at the URL localhost. 63
1880 really slash. 64
You know it's actually there. 65
And so the forward slash maps to our app component and thus we see our app component right here. 66
Let's try navigating to say like pose you know what happens when we go here. 67
Well check it out. 68
We got an error message over here that says re-act router location post did not match any routes so 69
we haven't defined a mapping between slash posts and any components yet so re-act router says I don't 70
know about that you are all you know. 71
I see the U R L I see the path up here but I don't know what to show. 72
Given that component are given that route I don't know what what component you want me to show you. 73
OK so let's move on to the next section and start doing a little bit more fancy routing than just our 74
home directory here.