In last video we spoke about where we are going to trigger some programmatic navigation.
So immediately after we successfully create our Stream we're going to attempt to navigate our user automatically
back to our route route.
Now in this video we're going to talk about how we actually do programmatic navigation.
Now here's the good news and the bad news.
The good news is that programmatic navigation sometimes with re-act writer Dom is really easy but sometimes
it's really not easy at all.
So unfortunately we are in one of the scenarios where it is not super easy to do programmatic navigation.
Let me tell you why.
OK.
So quick diagram here.
Now we've looked at this diagram quite a while ago.
Remember we have a browser router at the very top of our component hierarchy internally internally the
browser router creates this history object.
Remember we spoke about how this history object keeps track of the address in the address bar of your
browser up at the top.
So anytime that address changes the history object is going to communicate the change over to the browser
router.
Now the history object over here is not only about watching the address bar the history object also
has the ability to change the address bar as well.
And that's how we're going to do pro programmatic navigation.
We are going to make use of this history object.
Now the reason that is said had said that sometimes programmatic navigation is easy and sometimes that's
hard is the fact that this history object is created by the browser router.
In other words it is kind of challenging for you and I to write code that can get a handle or a reference
to that history object.
It is more challenging than you might expect.
Let me show you why.
OK.
So here's essentially what goes on in normal operation with re-act router.
Internally the browser router creates this history object then any time that the browser router renders
some component like let's say PAGE ONE Capone right here the browser router passes that history object
as a prop down to your component.
So inside of any component that gets rendered directly by re-act router it's going to receive this history
object.
And so this Complan right here could very easily trigger some navigation inside of it.
Now that's the key word here.
The component could easily trigger navigation inside of it.
But in our case we are not trying to do navigation from a component we are trying to do navigation from
an action creator getting access to this history object inside of a action creator or any non-HD Riak
component essentially is what is a little bit challenging it is hard for us to get a reference to that
history object.
One very simple solution would be to do something like this.
So weve got our history object that gets created by the browser router the browser router communicates
the history object down to our component and then we could say that any time that our component calls
or action creator the component should pass along the history object into the action creator.
And so that's essentially saying that inside of our action Krater right year we would receive not only
our form values but also some history object as well.
Now this is kind of a pain because it means that every single time we want to do programmatic navigation
we would have to write our action creators to be called with a history object and we would make sure
that all of our components called the action creator with the history object as well.
So even though this is possible it is not super ideal.
So were going to use an alternative solution and remember the solution when I show it to you is going
to look a little bit weird.
The reason we are going through the solution is that just getting access to this history object is a
pain.
All right so heres a solution.
Remember I told you that the browser router internally creates the history object and the fact that
the browser router maintains that history object is what makes our life all that challenging.
So essentially we're just going to kind of turn the tables on the browser router.
You and I are going to create the history object instead.
So you and I are going to create a history object inside of a dedicated file inside of our project.
Then any time that you and I want to get access to that history object we're just going to import that
file.
We're going to import the history object very easily because we are maintaining control over the history
object ourselves and we are not allowing re-act router to create the history object itself.
So that's how we get easy control over it.
This history object we created ourselves as opposed to allowing re-act router to create it now is a
little bit of just odds and ends here just fine grained details.
When we create this history object we're going to create a history object that is the corresponding
type to whatever router we had created.
So remember before we had made a browser router whenever you create a browser router internally that
creates an object not just called history it's the browser history object or like the browser flavor
of the history object.
If you watch that optional video many many many videos around a go around browser router and hash router
in memory router.
You'll recall that essentially these different routers.
And now I'm telling you the history object as well just changes what part of the neural that re-act
router looks at to decide where a user is trying to navigate to.
So when I say browser history we are creating a history object that is going to look at everything after
the port or the domain of your address to decide what content to show on the screen because we are now
creating our own history object.
We are no longer going to create a browser router object as the top of our component hierarchy.
Instead we are going to create a create a plain router we create a plain router when we create the history
object ourselves again.
It's not like the worst thing I would think I'm making a little bit more complicated than it needs to
be here.
Essentially when we create a browser router browser router internally decides to create a browser history
so now that we are creating a browser history ourselves we use a generic router.
That's basically it putting in much more simple terms.
Okay enough discussion.
Let's actually get to business here.
Let's take a quick pause and we'll start putting together this custom browser router between browser
history object in the next video.