BrowserRouter vs HashRouter

Before you start
Hey there! This article can help you if you start learning a React.js. This article include the following: my experience of using, some examples and explanation of differences between Browser- and HashRouter.
What is differences?
Probably you know, we’re can’t using <Route> in our React code without BrowserRouter. If you try to learn more thing’s about this, you can read about HashRouter. It would seem, why HashRouter is exist, if we are have BrowserRouter? Reasons is very simple: once upon the time people can’t use JavaScript for changing url location. Time passed… and BrowserRouter is existing. Because BrowserRouter is a replacement of HashRouter, it’s don’t use any more.
A BrowserRouter that using html5 historyAPI (pushState, replaceState and the popstate event)
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</BrowserRouter>A HashRouter that uses the hash portion of the URL (i.e. window.location.hash)
<HashRouter
basename={optionalString}
getUserConfirmation={optionalFunc}
hashType={optionalString}
>
<App />
</HashRouter>What’s mean?
Well. If we are know that a BrowserRouter can change url location, we can use it. Just forget about HashRouter, because we needn’t it. Right? Not quite.
When I first time use a BroserRouter I had problem’s with deploying my application in Github Pages. Well, I deployed my app, but my url location don’t work ( that was expected ). If I reloading my app’s page, I can see 404 error. It’s mean Github Pages can’t find index.html in my url.
Reason’s for use…
Like I said, in “normal” host providers you can use only BrowserRouter and you will be happy. But If you using host providers with support for static applications ( Github Pages in example ) you need to use BrowserRouter.
How it’s work:


What’s about properties?
We are know already why and where we should use Browser(Hash)Router. But what’s about props?
BrowserRouter
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</BrowserRouter>BrowserRouter can take 4 properties: basename, forceRefresh, getUserConfirmation and keyLength.
basename — string
Here you can give a baseURL for your application.
<BrowserRouter basename="/main" />
<NavLink to="/profile"/> // renders <a href="/main/profile">That props need for correct setting in Github Pages.
forceRefresh — bool
BrowserRouter don’t reload a page after changing url location.
If true the router will use full page refreshes on page navigation. You may want to use this to imitate the way a traditional server-rendered app would work with full page refreshes between page navigation.
<BrowserRouter forceRefresh={true} />getUserConfirmation — function
A function to use to confirm navigation. Defaults to using window.confirm.
functionName = (message, callback) => {
// this is the default behavior
const allowTransition = window.confirm(message);
callback(allowTransition);
}<BrowserRouter
getUserConfirmation={functionName}
/>
If you only start to learn React, you needn’t it.
keyLength — number
The length of location.key. Defaults to 6.
<BrowserRouter keyLength={8} />If you only start to learn React, you needn’t it.
HashRouter
<HashRouter
basename={optionalString}
getUserConfirmation={optionalFunc}
hashType={optionalString}
>
<App />
</HashRouter>HashRouter can take 3 properties: basename, getUserConfirmation and hashType.
basename — string
You know about basename already. This you can set base URL for all locations too. But you should know: a properly formatted basename should have a leading slash, but no trailing slash. Because HashRouter add to URL hash symbol — #.
// if you use correct formate
<HashRouter basename="/main"/>
<Link to="/profile"/> // renders <a href="#/main/profile">
// if you use uncorrect formate
<HashRouter basename="main"/>
<Link to="/profile"/> // renders <a href="#main/profile">getUserConfirmation — function
Similar with BrowserRouter. A function to use to confirm navigation. Defaults to using window.confirm.
functionName = (message, callback) => {
// this is the default behavior
const allowTransition = window.confirm(message);
callback(allowTransition);
}<BrowserRouter
getUserConfirmation={functionName}
/>
If you only start to learn React, you needn’t it.
hashType
The type of encoding to use for window.location.hash. Available values are:
"slash"- Creates hashes like#/and#/main/profile"noslash"- Creates hashes like#and#main/profile"hashbang"- Creates "ajax crawlable" (deprecated by Google) hashes like#!/and#!/main/profile
Defaults to "slash".
LifeHack
If you want to use basename in your Router, you can use this code:
<Router basename={process.env.PUBLIC_URL} />That’s mean, you baseURL will be correct work in local machines and some hostings.
If you have comment about my article, please follow my linkedIn. Thank for your feedback.