CODEWITHSUNDEEP
reactjs
Alwaysblue
Alwaysblue

Reputation: 11960

What is the difference between HashRouter and BrowserRouter in React?

I am new to programming which makes things slightly difficult for me to understand if I read the official docs.

I was reading about React Router 4 from here

In this article, the author was talking about <HashRouter> and <BrowserRouter>

This is what he mentioned:

HashRouter basically it uses the hash in the URL to render the component. Since I was building a static one-page website, I needed to use this.

BrowserRouter, it uses HTML5 history API to render the component. The history can be modified via pushState and replaceState. More information can be found here

Now, I don't get the significance and use cases for both, Like what does he mean when he says history can be modified via pushState and replaceState and it uses the hash in the URL to render the component

While the first explanation for BrowserRouter is entirely vague to me, the second explanation about HashRouter also doesn't make sense, like why would someone use Hash (#) in the url to render the component?

Upvotes: 222

Views: 257192

Answers (11)

Mohammed Shareef C
Mohammed Shareef C

Reputation: 4050

HashRouter:

  1. You deliver the html and react's build files (.js, .css etc) in a single url for frontend, say /dashboard/.
  2. while clicking links in the rendered page, the browser appends more routes to the url after the hash (#). like /dashboard/#settings. But no requests goes to server bcoz of the click only
  3. If you refresh the page the request goes to the same single url in server (/dashboard/). (the hash part is relevant only for browser, not for server). Browser will route based on the url and render the settings page if you are in url /dashboard/#settings.
  4. This router works with static server also

BrowserRouter:

  1. You need to deliver the html and react's build files (.js, .css etc) for all possible urls for frontend, like /dashboard/, /dashboard/settings etc. (No hash used)
  2. while clicking links in the rendered page, the browser send request to the url and gets the page from server and renders it (routing is done by browser based on the url)
  3. If you refresh the page the request goes to the server with current url in browser (like /dashboard/settings). Routing will happen based on the url and render the settings page if you are in url /dashboard/settings.
  4. You server needs to be dynamic and you should be able to serve the react files and html in all possible urls for react. This wont work with static server

Correct if I'm wrong

Upvotes: 0

Abraham Simpson
Abraham Simpson

Reputation: 350

Another key scenario where both types of routers differ is when deploying your app on a subdirectory, i.e. your app is not hosted at the server root host.com. Let's say you want all your routes to start from host.com/prefix. In this case you will have to use a Hash Router, unless you re-compile your react app again for each different prefix.

Upvotes: 1

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

SERVER SIDE: HashRouter uses a hash symbol in the URL, which has the effect of all subsequent URL path content being ignored in the server request (ie you send "www.mywebsite.com/#/person/john" the server gets "www.mywebsite.com". As a result the server will return the pre # URL response, and then the post # path will be handled (or parsed) by your client side react application.

CLIENT SIDE: BrowserRouter will not append the # symbol to your URL, however will create issues when you try to link to a page or reload a page. If the explicit route exists in your client react app, but not on your server, reloading and linking(anything that hits the server directly) will return 404 not found errors.

Upvotes: 83

Zekarias Taye Hirpo
Zekarias Taye Hirpo

Reputation: 849

The main use case scenario for choosing "hash router" over "browser router" is on production environment. Let's say we have this url "www.example.com/Example". In this case, some servers tend to search a folder by a name "Example" and ultimately return 404 as we have single page application, index.html. So, to avoid such confusion we use "www.example.com/#/Example". That is where hash router shines.

resource: https://www.techblogsnews.com/post/browser-router-vs-hash-router-in-react-js

Upvotes: 11

Michael Freidgeim
Michael Freidgeim

Reputation: 28531

Comment BrowserRouter vs Router with history.push() refers to the article https://www.techiediaries.com/react/react-router-5-4-tutorial-examples/#React_Router_5_Routers_BrowserRouter_vs_HashRouter

“If you are using a dynamic server that can handle dynamic URLs then you need to use the BrowserRouter component but if you are using a server that only serves static files then a HashRouter component is what to be used in this cases”

Limitation of HashRouter re history

I previously misinterpreted a note at the top of HashRouter article in https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with BrowserHistory instead.

as discouraging to use HashRouter in general, but authors do not recommend HashRouter only in case if if you need support for location.key or location.state.

Upvotes: 5

Raj Panchal
Raj Panchal

Reputation: 5

Basically if one uses BrowserRouter one can use a url like "soAndSoReactPage/:id"

eg: 

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

now, in the react component "soAndSoReactComponent" the "id" can then be extracted using useParams and thus you can display the page "soAndSoReactComponent" as per the id

such a thing can't be done with HashedRouter,

Upvotes: -3

Kumar
Kumar

Reputation: 324

Refreshing the page causes the browser to send a GET request to the server using the current route. The # was used to prevent us from sending that GET request. We use the BrowserRouter because we want the GET request to be sent to the server. In order to render the router on the server, we need a location — we need the route. This route will be used on the server to tell the router what to render. The BrowserRouter is used when you want to render routes isomorphically.

Upvotes: 22

asishkhuntia
asishkhuntia

Reputation: 427

One more use case i want to add. While using BrowserRouter or Router, it will work fine on our node server. Because its understand client routing (Preconfigured).

But while we deploy our build React app on Apache server(just say PHP, on GoDaddy), then routing will not work as expected. It will land into 404, for that we need to configure .htaccess file. After that also for me each click/url, its sending request to server.

In that case better we use HASH Routing (#). # we use this on our html page, for traversing in HTML content and it will not lead to server request.

In above scenario we can use HashRouting, that is all url that present after #, we can put our routing rules to work as SPA.

Upvotes: 13

Abdul R.
Abdul R.

Reputation: 290

"Use Cases"

HashRouter: When we have small client side applications which doesn't need backend we can use HashRouter because when we use hashes in the URL/location bar browser doesn't make a server request.

BrowserRouter: When we have big production-ready applications which serve backend, it is recommended to use <BrowserRouter>.

Reference by book: Learning React: Functional Web Development with React and Redux By Alex Banks, Eve Porcello

Upvotes: 8

Estus Flask
Estus Flask

Reputation: 223318

BrowserRouter

It uses history API, i.e. it's unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other route on server side. On client side, window.location.pathname is parsed by React router. React router renders a component that it was configured to render for /react/route.

Additionally, the setup may involve server-side rendering, index.html may contain rendered components or data that are specific to current route.

HashRouter

It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing.

Backward-compatible single-page application can use it as example.com/#/react/route. The setup cannot be backed up by server-side rendering because it's / path that is served on server side, #/react/route URL hash cannot be read from server side. On client side, window.location.hash is parsed by React router. React router renders a component that it was configured to render for /react/route, similarly to BrowserRouter.

Most importantly, HashRouter use cases aren't limited to SPA. A website may have legacy or search engine-friendly server-side routing, while React application may be a widget that maintains its state in URL like example.com/server/side/route#/react/route. Some page that contains React application is served on server side for /server/side/route, then on client side React router renders a component that it was configured to render for /react/route, similarly to previous scenario.

Upvotes: 255

Ali Tourani
Ali Tourani

Reputation: 1247

Both BrowserRouter and HashRouter components were introduced in React Router ver.4 as subclasses of Router class. Simply, BrowserRouter syncs the UI with the current URL in your browser, This is done by the means of HTML-5 History API. On the other hand, HashRouter uses the Hash part of your URL to sync.

Upvotes: 12

Related Questions