HashRouter与BrowserRouter

Question

我是编程的新手，如果我阅读了官方文档，这会使我很难理解。

我从这里阅读有关React Router
4的内容

在这篇文章中，作者在谈论<HashRouter>和<BrowserRouter>

这就是他提到的

HashRouter 基本上使用URL中的哈希来呈现组件。由于我正在构建一个静态的单页网站，因此需要使用它。

BrowserRouter
，它使用HTML5历史记录API呈现组件。可以通过pushState和replaceState修改历史记录。更多信息可以在这里找到

现在，我都没有这两者的意义和用例，就像他所说的 可以通过pushState和replaceState修改历史记录* 并
使用URL中的哈希值来呈现组件 时所说的那样。 *

虽然对BrowserRouter的第一种解释对我来说完全是模糊的，但对HashRouter的第二种解释也没有意义，例如为什么有人在URL中使用哈希（＃）来呈现组件？

Answer 1

它使用历史记录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 渲染的组件。