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 component and that is all done on the client side in Javascript (basically replacing elements in the DOM with the specific component code).
Where does the server come into play with the BrowserRouter as mentioned in the above statement?
Updated for HashRouter:
In case of hash router, your client routes look like this - ://www.mysite.com/#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.com/ 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.com/. And you have a client route at say /login on which you render a Login component 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 component say App, you will redirect the user to the /login route and the Login component is mounted by react-router. The url now is ://www.mysite.com/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.com/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 :).