If we go to about, it becomes hashtag about. Now our route simply becomes forward slash hashtag. Our route URL becomes just forward slash after the hash. It's a hashtag followed by a slash, followed by whatever the path is to. Its default is slash, which is what we're seeing right now. One option that's unique to the hash router is the hash type prop. If I go to about we get about appended to the same URL. Now if I go to the home URL we can see that our route is forward slash hashtag forward slash. We're going to export by default our hash router app. We're just outputting our links routes component. I'm going to call this guy hash router app. I'm going to kill off this force refresh. I'm going to come down here and I'm going to go ahead and copy our browser router app. If we're not in a position to support the HTML5 history API, we can use something called the hash router. When I change our route to home, the time has not changed because we have not completely rerendered our router.
If I update that return value to false we can see the time here is 034:18. If I go to about, our time has updated to 034:03 because we've actually completely refreshed the browser, which means that this force refresh was called again. We can see that we've called force refresh which has returned the value of true. Over here in the browser I'm going to load up our dev tools. I'm going to return true, but I'm also going to log out a new date string. Of course we need to eventually return a true or false here.
I'm actually going to set it to a function and we're going to call that directly here. Along with that we do get a couple options here, so one is force refresh. This router is meant to be used in environments where we can support the HTML5 history API. Here in the browser we have our home link and our about link. Then we'll go ahead and export that by default. Inside of that we're going to have our links routes component. We're going to output a browser router component. We're going to create a new component here called browser router app. I've got a component here called links routes which has a couple of React Router links as well as React Router routes tied to those links.
I've imported that from our React Router DOM library. React Router provides us with a number of preconfigured routers that we can use, the most common of which is browser router.
0 kommentar(er)
