In last video we spoke about how we are going to create our own browser history object.
So enough discussion let's actually start writing some code.
I'm going to flip back over to my code editor and then inside of my S R C directory so we're not putting
this in the actions folder or anything like that inside of SIRC.
We're going to create a new file called history.
Yes.
So inside of here you and I are going to create a history object and export it for us throughout our
entire application.
So again the idea here is that you and I maintain this history object as opposed to react router because
you and I are creating it.
It's going to be a lot easier to get access to it and change what page the user is looking at.
So at the top I'm going to import create history from history slash create browser history like so.
So first off history right here the history package was installed automatically with re-act Rotterdam
when I've been talking about that history object.
It's technically a separate library that re-act Rotterdam depends upon as a dependency.
So you did not have to manually install this package it was installed automatically as a dependency
of re-act Rotterdam.
So we are importing from the history package a file called create browser history.
So create history right here.
This is a function that we can call to create a new history object.
So after the import statement we are going to export default create history like so and believe it or
not.
That is it.
We don't have to do anything else.
So this is now going to create a history object that you and I maintain and we can get access to anywhere
inside of our project.
So the first thing we need to do is make sure that we create a plain router in site instead of a browser
router.
So I'm going to flip back over to my component's apt geus file.
I want to show you the error message that you would get if you don't go through creating this manual
replaying router object just so you have a little bit of I don't know something interesting to look
at.
So at the top I'm going to import history from up one directory history and then I'm going to pass as
a prop to my browser router.
I get a pass in that history object and I'm going to call it history as the prop like so.
So anytime that we pass in a prop called history the router is going to attempt to use it instead of
its default implementation which is to create its own internal history object like the original diagram
we looked at over here son going to save both these files now and I'll flip back over to my application
and I'll notice a warning and side of your console.
So open up that console and you're going to see browser router ignores the history prompts.
Like I said I wanted you to see the error message that you would get if you try to pass in the history
object with a browser router essentially re-act Rotterdam is saying here.
Hey the browser router I create my own history object.
You can't tell me what history to use.
That's the warning message you're seeing here.
So if you read that err message or the warning carefully it essentially is saying what I just told you
we need to import a plain router and we'll pass our history object into the plain router so to do so.
All flip back over to my laptop.
File at the very top of find the import statement for browser router.
So no longer are we going to use browser router instead we're going to use just router old and find
my browser router tag and replace it with router and I'll find the closing tag and replace it with router
as well.
So now we can save this flip back over and the warning message goes away.
And now if you start to click around you'll notice that navigation occurs exactly as it did before.
So there's no difference here whatsoever.
The only change is that you and I are now in charge of that history object as opposed to react better
Dom creating it internally.
So now we've got the history object which means we can trigger direct navigation or programmatic navigation
from our create stream action Creator.
All right so quick pause right here.
When we come back the next section we'll start to do that programmatic navigation after we successfully
create a stream.