reactjs - React 中 HashRouter 和 BrowserRouter 有什么区别？

Question

我是编程新手，如果我阅读官方文档，这会让我有点难以理解。

我正在阅读有关 React Router 4 from here 的内容

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

这就是他提到的:

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

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

现在，我不明白两者的意义和用例，就像他说历史可以通过pushState和replaceState修改时的意思一样，它使用散列渲染组件的 URL

虽然对 BrowserRouter 的第一个解释对我来说完全模糊，但关于 HashRouter 的第二个解释也没有意义，比如为什么有人会在 url 中使用 Hash (#) 来渲染组件？

Answer 1

浏览器路由器

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

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

哈希路由器

它使用 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 。包含 React 应用程序的某些页面在服务器端为 /server/side/route 提供服务，然后在客户端 React 路由器渲染一个配置为为 /react/route< 渲染的组件/em>，与之前的场景类似。