“用例”

HashRouter：当我们有不需要后端的小型客户端应用程序时，我们可以使用，HashRouter因为当我们在URL /位置栏中使用哈希时，浏览器不会发出服务器请求。

BrowserRouter：当我们有支持后端的大型生产就绪应用程序时，建议使用<BrowserRouter>。

本书参考：学习React：React和Redux的功能Web开发作者：Alex Banks，Eve Porcello

恕我直言，BrowserRouter是一个hack，使用它唯一获得的就是美观的URL。为什么是骇客？因为您通过覆盖浏览器的默认行为来诱骗浏览器加载客户端路由，以从服务器获取页面。将BrowserRouter配置为在生产模式下与Webpack一起使用是一个主要的麻烦。另外，即使没有检查其背后的代码，我也可以肯定它的速度较慢，因为需要额外检查请求的路由是否为服务器上的404，以加载客户端页面。HashRouter可以直接使用，可以与旧的浏览器兼容，并且可以与Webpack一起使用而无需黑客。

BrowserRouter

它使用历史记录API，即它不适用于旧版浏览器（IE 9及更低版本和同期版本）。客户端React应用程序能够维护干净的路由，例如example.com/react/route，但是需要Web服务器的支持。通常，这意味着应该为单页应用程序配置Web服务器，即，index.html为/ react / route路径或服务器端的任何其他路由提供相同的服务。在客户端，window.location.pathname由React路由器解析。React router渲染一个已配置为/ react / route渲染的组件。

此外，设置可能涉及服务器端渲染，index.html可能包含特定于当前路线的渲染组件或数据。

HashRouter

它使用URL哈希，它对受支持的浏览器或Web服务器没有任何限制。服务器端路由独立于客户端路由。

向后兼容的单页应用程序可以将其用作example.com/#/react/route。该设置不能通过服务器端呈现进行备份，因为它是服务器端提供的/路径，＃/ react / route URL哈希不能从服务器端读取。在客户端，window.location.hash由React路由器解析。与相似，React router会渲染一个已配置为/ react / route渲染的组件BrowserRouter。

最重要的是，HashRouter用例不仅限于SPA。网站可能具有旧式或搜索引擎友好的服务器端路由，而React应用程序可能是在URL中维护其状态的小部件，例如example.com/server/side/route#/react/route。与/ server / side / route一起在服务器端提供一些包含React应用程序的页面，然后在客户端，React路由器会渲染一个已配置为/ react / route渲染的组件，类似于先前的场景。

我想添加一个用例。使用BrowserRouter或Router时，它将在我们的节点服务器上正常工作。因为它了解客户端路由（预配置）。

但是，当我们在Apache服务器（仅在GoDaddy上说PHP）上部署构建React应用程序时，路由将无法按预期工作。它将进入404，为此我们需要配置.htaccess文件。之后，对于我来说，每个点击/ URL，也都向服务器发送请求。

在这种情况下，我们最好使用HASH路由（＃）。＃我们在html页面上使用它来遍历HTML内容，它不会导致服务器请求。

在上述情况下，我们可以使用HashRouting，即＃后面的所有url，我们可以将路由规则用作SPA。

服务器端： HashRouter在URL中使用哈希符号，这会导致服务器请求中忽略所有后续URL路径内容（即，您将服务器获取“ www.mywebsite.com/#/person/john” .mywebsite.com”。结果，服务器将返回pre＃URL响应，然后post＃路径将由您的客户端react应用解析。

客户端： BrowserRouter不会将＃符号附加到您的URL，但是当您尝试链接到页面或重新加载页面时会产生问题。如果客户端响应应用程序中存在显式路由，但服务器上不存在显式路由，则重新加载和链接（直接击中服务器的任何内容）将返回404 not found错误。

无论BrowserRouter和HashRouter组件是在阵营第4代路由器作为子类介绍Router类。只需BrowserRouter将UI与浏览器中的当前URL同步，即可通过HTML-5 History API来完成。另一方面，HashRouter使用URL的哈希部分进行同步。