What is the difference between hashHistory and browserHistory in react router?

Question

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?

Athanasius

See the react-router documentation here: github.com/reactjs/react-router/blob/master/docs/… (and the entry for hash history below) – Mesh

The React-router documentation 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. – Reprove

Since the previous two comments, the documentation has moved. Try here: github.com/ReactTraining/react-router/blob/v3/docs/guides/… – Metallophone

Answer 1

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

Apteral

What are the benefits or drawbacks (if any) for this hashHistory Url? – Neuromuscular

Can browserHistory be used to preserve browser linking anchor ability ? I have tried this method on my router github.com/ReactTraining/react-router/issues/… and the view get rerendered on every anchor click – Floyfloyd

Look at this post. I think this is what you are looking for: https://mcmap.net/q/188126/-use-anchors-with-react-router. But the answer it appears is yes. – Apteral

Hash history is also meant for legacy browsers npmjs.com/package/react-history – Commodious

Awesome, this little answer made me happy, very clear and very obvious, but in React-Router version 4 we can not use them unfortunately. – Nurmi

Answer 2

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).

Penance

Answer 3

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://mcmap.net/q/340888/-react-router-why-the-preference-for-browserhistory-over-hashhistory

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.

Reproval

Answer 4

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.

Hypothalamus