BrowserRouter vs HashRouter

Daniel Hramkov
Nov 6 · 4 min read

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:

That’s your application after deploying in Github Pages. Hash symbol after url is show GP’s servers, all thing’s after Hash symbol only for User’s browser. GP’s servers don’t initialising url after hash. It’s mean you can reload your app’s page and you won’t see 404 error.
Also it’s mean you can copy some url and send it to your friends. They are won’t see 404 error too. Due to HashRouter we can testing our SPA in hostings with support for static applications.

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.

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.

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} />

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.

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.

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">

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.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade