Only personal understanding, please correct me if inappropriate
First, in principle
# HashRouter included in the path, corresponding to the HTML anchor positioning. ( # Symbol of English called hash, so called HashRouter, and hash it does not matter Oh))
The BrowserRouter using the new features of HTML5 History, no HashRouter (Anchor Position) as general purpose, low version of the browser may not support.
Second, from the usage
You can pass any parameters for communication between the components for assembly BrowserRouter time jump, but not HashRouter (unless manually splicing the URL string), it is generally used with Redux, data communication between components.
Third, the production practice
1.HashRouter
HashRouter equivalent to the anchor position, so regardless of how changes in the back of the # path, requests are equivalent to that page before #. Front and rear end can be easily carried out without isolating deployment (i.e. the front end of the file server into the packaging or public static in),
Because the links are requested ip address: port / # / xxxx, and therefore requested resource path is always /, equivalent to index.html, and other back-end API interface can be a normal request, and will not / collision, the front and rear without isolation of the end cross-domain problem does not occur.
Drawback is ugly, there is always a path # baby expressed obsessive-compulsive disorder committed ...
2.BrowserRouter
Because the requested mode links are under BrowserRouter ip address: port / xxxx / xxxx, and thus corresponds to each URL will access a different back-end address, if the backend does not cover the route will generate a 404 error.
Can be solved by adding middleware on the server side route matches the last, if the previous API interface does not match the index.html page is returned. But this also has some minor problems, because they require front-end and back-end routing routing URL can not be repeated.
For example, the list of components called commodity / product / list, a list of goods requested API is / product / list, it will not access the page, but the API interface to match.
Solution:
Before and after deployment of the end of the separation, such as the initial address ip1: port 1, the rear end interface address ip2: port 2, using a reverse proxy server Nginx distribution request. Front-end to back-end server initiated the request for the URL where the nginx + / api / xxx, judging by NGINX configuration file, if the URL begins with api then forwarded to the backend interface, or forwarding address to the front end, access to the project simply visit Nginx server.