53

I have googled quite some bit, but I didn't find a clear answer to the following question: What is the difference between hashHistory and browserHistory in react-router?

Ben Bieler
  • 1,518
  • 1
  • 14
  • 22
  • 1
    See the react-router documentation here: https://github.com/reactjs/react-router/blob/master/docs/API.md#browserhistory (and the entry for hash history below) – Daniel Diekmeier Mar 29 '16 at 16:20
  • The [React-router documentation](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory) has pretty good information about the differences. The documentation will follow the changes of the API, too, so consulting those instead of a quickly-stale explanation here will be best. – markthethomas Mar 29 '16 at 16:37
  • 2
    Since the previous two comments, the documentation has moved. Try here: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md – Jon Wilson Mar 31 '17 at 16:43

4 Answers4

53

The basic difference is that the hashHistory uses URLs like: http://myurl.com/#page/another_page/another_page

With BrowserHistory you get normal urls (no hash): http://myurl.com/page/another_page/another_page

smcdrc
  • 1,671
  • 2
  • 21
  • 29
  • 13
    What are the benefits or drawbacks (if any) for this hashHistory Url? – aquaflamingo Mar 01 '17 at 02:40
  • Can browserHistory be used to preserve browser linking anchor ability ? I have tried this method on my router https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604 and the view get rerendered on every anchor click – Dimitri Kopriwa Mar 02 '17 at 12:55
  • Look at this post. I think this is what you are looking for: http://stackoverflow.com/a/40280486/217187. But the answer it appears is yes. – smcdrc Mar 02 '17 at 16:15
  • Hash history is also meant for legacy browsers https://www.npmjs.com/package/react-history – Karis Jul 12 '17 at 15:17
  • Awesome, this little answer made me happy, very clear and very obvious, but in `React-Router` version 4 we can not use them unfortunately. – AmerllicA Nov 21 '17 at 16:48
8

First difference:

They are using different WEB APIs. <HashRouter> uses and reads the hash from URL, <BrowserRouter> uses window.history WEB API.

Second difference:

<HashRouter> is used for static one-page website. Ideal for browser based projects. <BrowserRouter> is used for dynamic website. Should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URL).

Bojan Golubovic
  • 141
  • 2
  • 11
4

I don't think the question was asking for differences in the format, but rather technical. Hence sharing this answer here with a technical difference: https://stackoverflow.com/a/42157741/2445694

Basically the browser don't send the url after the #

So suppose that a website restricted areas for members and admins. A user navigates to /member, and is prompted for logging in. However the server won't know if the user was trying to access /admin or /member before getting on the log in page, so after logging in the server don't know where to redirect.

luanped
  • 3,178
  • 2
  • 26
  • 40
1

1) Browser’s history’s location array contains more than just the locations that have been visited within our application. Allowing access to this list would leak information about a user’s browsing history that websites should not be allowed access to.

2) Browser history creates location objects whose pathname is the URL’s full pathname. However, you can specify a basename for a history, in which case a portion of the full pathname will be effectively ignored.

3) Browser History in static file server will have one real location on our server to fetch our HTML from while Hash history uses the hash section of the URL to set and read locations.

4) Hash History is reliant as it store all of the path information in the hash of a URL.

MERLIN THOMAS
  • 747
  • 1
  • 7
  • 15