I read this statement:

The BrowserRouter should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the HashRouter should be used for static websites (can only respond to requests for files that it knows about).

I got it from this.

I don't understand what exactly it means when it says BrowserRouter should be used when you have a server that will handle dynamic requests. I thought when you click on a specific Link (in the case of React), the router will load the specific ponent and that is all done on the client side in Javascript (basically replacing elements in the DOM with the specific ponent code).

Where does the server e into play with the BrowserRouter as mentioned in the above statement?

I read this statement:

The BrowserRouter should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the HashRouter should be used for static websites (can only respond to requests for files that it knows about).

I got it from this.

I don't understand what exactly it means when it says BrowserRouter should be used when you have a server that will handle dynamic requests. I thought when you click on a specific Link (in the case of React), the router will load the specific ponent and that is all done on the client side in Javascript (basically replacing elements in the DOM with the specific ponent code).

Where does the server e into play with the BrowserRouter as mentioned in the above statement?

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Sep 29, 2017 at 4:14 Priyantha 5,09166 gold badges3030 silver badges4646 bronze badges asked Sep 29, 2017 at 4:09 user5228393user5228393

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Updated for HashRouter:

In case of hash router, your client routes look like this - ://www.mysite./#login. As the # is a client-only fragment and is never sent to the server, even if the user bookmarked it, the browser will still request ://www.mysite./ only, removing the #login part. So the server never needs to be bothered with any dynamic paths. Although this may look simpler, on the negative side, you end up losing the traditional (and actual) purpose of #, which is to have local anchors. Hence this approach should be avoided unless you are targeting older browsers which don't have history API.

Earlier:

Suppose your web app is deployed on ://www.mysite./. And you have a client route at say /login on which you render a Login ponent which handles auth. So, when the user first visits your page, the server will typically send index.html to the browser and it will bootstrap your React app.

Then per the logic in your default ponent say App, you will redirect the user to the /login route and the Login ponent is mounted by react-router. The url now is ://www.mysite./login and so far all is good!

Now say the user bookmarked the page at this point and visited it later, or simply clicked on refresh. The browser will now ask the server for a page at ://www.mysite./login and this is where the server must send back index.html.

In-fact, for a single page app (aka SPA), for all the client-routes, the server must send back your app's bootstrap file, i.e. index.html.

This is what is meant by that statement in quotes. You must configure your server to send back index.html for any dynamic paths.

Hope this helps :).