So we've got re-act router installed now. 2
Let's go ahead and talk a little bit about what it's going to be doing for us exactly. 3
I'm going to go ahead and pull up a diagram to help explain exactly what's going on with it. 4
OK. 5
So here's kind of what's going on with re-act router. 6
It's got a diagram here of our Web page. 7
You know the page load in the user's browser and then a couple of steps that go around the loop here 8
. 9
So I know it's probably pretty pedantic for me to read the text on here but you know just humor me for 10
a little bit. 11
Let's kind of walk through this diagram a little bit. 12
So our diagram starts with the top left and then goes around clockwise from there. 13
So we start off at the web browser. 14
This is where you know of course everything starts off fat and let's say that the user is just kind 15
of sitting there you know hand-done whatever. 16
Reading some text on the screen and they say oh this looks like a really neat link over here I click 17
on this link right. 18
When the user clicks on the link it does really one thing you know that we really care about as many 19
things but there's only one thing that we care about. 20
It changes or else that's what we really care about in our application we really care about whenever 21
the you are well inside of that address bar changes. 22
So most critical critical thing in the world to us right now. 23
So this diagram is meant to illustrate exactly what happens when the user does basically any action 24
that changes the R L so it kicks off this whole series of events that go through here. 25
Let's walk through them one by one. 26
So first off the first thing I tell you is that we just installed re-act router. 27
Right. 28
You know we just said NPM install re-act router but we also got a kind of a bonus package out of that 29
as well. 30
The extra package that we got is called history. 31
History is a tiny javascript package that has one purpose to it just one it manages the URL of the web 32
browser it watches the Welford changes and it also has the ability to update it over time. 33
Basically it's how our application is going to work directly with the u r l. 34
In practice we shouldn't ever really have to very directly work with the history. 35
So throughout our application we'll probably never see a direct reference to this history library but 36
trust me it's there. 37
So whenever the world changes history is watching for that. 38
And so the browser basically says hey history library just so you know you know the user just changed 39
the URL. 40
Here's the new one. 41
You I assume that you want to do something with this. 42
History takes new Ural. 43
And again it's only job is to monitor the user L and make changes to it and know whenever it updates 44
. 45
So it takes that new or new Ural and then it kicks on down the line to react router you know react rather 46
be in the library that we just installed. 47
So here's where things start to get really interesting this is the part that we actually have some control 48
over. 49
You know we don't really have that much control over history but we sure do overreact router. 50
So history is told. 51
Avi you are all just updated it pass it on to react router re-act router takes that you are l and its 52
purpose is to change the components that are being used in our application. 53
Based on that URL. 54
In other words it's a part of our app that will make the user think that they're navigating around to 55
a different web page. 56
It takes CRL and depending on the characters that you are l it's going to return a different set of 57
components to react. 58
It says OK you know I see this new euro you are l it just got changed based on this you were ill. 59
I think I need to render a component A B and C or maybe X Y and Z or maybe you know a component whatever 60
doesn't matter. 61
It takes that you were l decides hey I need to render some new set of components and then it passes 62
them on to react. 63
So reactor receives those new components from re-act router. 64
It says Oh I just you know got this new collection of components I guess. 65
You know the user all change or you know whatever I just need to show some new content on the screen 66
so reac goes ahead and renders all the content on screen and the content just flows right back into 67
the browser. 68
And as far as the user is concerned the user thinks that they just navigated to make totally different 69
page. 70
Right. 71
These are things that they just change pages entirely they don't really know what's going on behind 72
the scenes. 73
All they know is that well the world changed. 74
Now I see a different bunch of content on the screen. 75
So that's really the relation between these three libraries. 76
We've got history which is kind of working behind the scenes and it's messy you know watching the euro 77
and also has the ability to update it when required. 78
But all it's really doing is taking the role when it changes and pass it on to reactor router rewash 79
router takes the L and says OK based on this Eurail I need to show this component and this component 80
and this component reactor router tosses out over to react and then react puts out some each female 81
and shows it to the screen and that's it that's really you know the whole cycle here. 82
Once we start going through their application and as you start working on larger applications this whole 83
process might start to seem like a little bit of a mystery but really at its core it's really a pretty 84
simple straightforward process so always try to keep this diagram in your mind as you're building these 85
you know more and more complex applications. 86
OK. 87
So with all this in mind now we've got a little bit better idea of the theory behind these different 88
libraries. 89
Let's go ahead and continue in the next section