It is known that the string after # will not be sent to the background when the browser loads the page using HashRouter. No matter how the hash is changed, the background will receive the request before #. The server only needs to return the same HTML, and then the browser side will parse the part after # to complete the browser side rendering. HashRouter is a front-end route (local update), BrowserRouter is a server route (webpage jump).

The resource path of the request is always /, which is equivalent to index.html, because the request has nothing to do with the Hash after #. However, some people say that such URLS are ugly, which I very much agree with, I have a strong ocD. When we pass parameters through state, hashRouter cannot obtain key and state values from history records because it does not use the API of HISTORY in HTML5. If state is used, the state value will be lost after refreshing the route, resulting in abnormal page display.

BrowserRouter uses a new HTML5 feature called History, which may not be supported by older browsers, but is better for the actual product. _

What’s good about the BrowserRouter user experience? Or why ****BrowserRouter is recommended.

  1. The History API provides pushState() and replaceState() methods to add or replace History

  2. The hash part is not sent by the browser to the server, which cannot get the request details

  3. Some applications ignore the hash part of the URL, eg.

HTML 5 History:

  1. History state management is a difficulty in modern Web application development. Users may not open a new page every time they operate, for example, they are familiar with local update data. In this case, the forward and back buttons lose their function, making it difficult for users to switch between different states
  2. H5 makes it easy to manage History state by updating the History object and changing the URL without loading a new page.
  3. With the History object operation, new state information is added to the History stack or a state information is replaced, but the browser does not send a request to the server, so the forward & Back buttons can also be used. Once you get the new state information, you must reset the page to the state represented by the data in the state object (this step is self-implemented, and the browser does not do it automatically).
  4. IE does not support
  5. When the page is refreshed, Browser goes to the server with the current URL, and returns an HTML. This needs to be handled by an intermediary agent
  6. The hashchange event is preferred for reasons of 1 (new in H5)