In the last section we discuss the purpose of re-act router remember react rather comes bundled along 2
with a separate package called history. 3
History is what interacts with the are L and then it passes updates to the URL on to react or outer 4
react rather than takes you or L and decides what components react needs to show based on that you are 5
l. 6
So in this section we're going to continue wiring up re-act router. 7
I got my terminal open here and I mean my root project directory. 8
I'm going to go ahead and make sure we can run our project by running and PM run star. 9
Are you going to do NPM start either one so this will spool our server up. 10
I'm going to open my browser and just make sure I can navigate to it. 11
Yep I got Riak simple starter appear perfect. 12
Ok I can open my code editor and I'm going to open inside of my or directory. 13
The index dot js file or we're going to do here is we're going to wire up re-act router to our application 14
. 15
We're going to make sure that re-act router is in charge of deciding what views or what components are 16
shown on the screen at any given time. 17
And again it's going to do this based on the R L so to hand over responsibility of routing and rendering 18
to react router. 19
We're going to end up replacing our app component or going to replace it with an instance of reac router 20
. 21
So at the top of the file I'm going to go ahead and find the line that says import app from components 22
out and we don't need this line here anymore. 23
We're going to render app in a separate location so I can go ahead and delete this and instead we're 24
going to import router and then a another object called browser history from re-act router. 25
All right and now this is going to look a little bit strange so bear with me here for just a second 26
. 27
We're going to write some code and then we'll talk about what's going on. 28
So I can delete the out call here and we're going to replace it with a router and a property called 29
History browser history like so. 30
OK so already you know what's going on here what's happening. 31
Well we imported two objects at the top router and browser history router is the object that decides 32
what Riak components we need to render whenever the oil changes. 33
You know we've discussed that concept several times now. 34
This is what's actually deciding what to show on the screen browser history is actually a little bit 35
more interesting. 36
It's an object that tells re-act router how to interpret changes to the u r l. 37
In this case we're using browser history but there are two other histories that we can use as well and 38
keep in mind that this history here is separate from the History Library. 39
I was talking about previously browser history means that whenever the Ural updates re-act router is 40
going to interpret everything after the protocol. 41
So if we have something like You know you are all something like a DP WW blog dot com PPOs 5 browser 42
history means whenever this part of the world changes. 43
Hey re-act router you need to go update. 44
You know this is the part that you care about. 45
You can duck suppose this browser history with a different object hash history. 46
So this would be a different way of keeping track of who you are l. 47
If we were using hash history anything after a hash symbol in here so if we had something that looked 48
like blague dotcom hash posts 5 with hash history we would be using everything after this hash you were 49
able to keep track of what the user is currently looking at. 50
Finally there's another one called memory history which doesn't really use the URL at all for reading 51
the history but again in our case we're going to use browser history so we'll just see the like so. 52
OK so that's the purpose of the history object it's just what part of the Eurail reactor header actually 53
cares about. 54
Now there's one last piece of configuration we need to add here. 55
We need to tell re-act router what routes are valid in our application. 56
So you know what different you are l forms. 57
We really care about and then which components to show for each of them. 58
Let's talk more about that in the next section.