React 中的 HashRouter 和 BrowserRouter 有什么区别?

IT技术 reactjs
2021-04-13 02:04:03

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

我正在从这里阅读React Router 4

在这篇文章中,作者正在谈论<HashRouter><BrowserRouter>

这是他提到的:

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

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

现在,我不明白两者的重要性和用例,就像他说历史可以通过 pushState 和 replaceState 修改并且它使用 URL 中的哈希来呈现组件是什么意思

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

6个回答

BrowserRouter

它使用history API,即它不适用于旧版浏览器(IE 9 及更低版本和同时代)。客户端 React 应用程序能够像example.com/react/route一样维护干净的路由,但需要由 Web 服务器支持。通常这意味着网络服务器应被配置为单页应用,即,相同index.html供应用于/react/路由路径或在服务器端的任何其他途径。在客户端,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一些包含 React 应用程序的页面在服务器端为/server/side/route 提供服务,然后在客户端 React 路由器呈现一个组件,它被配置为为/react/route呈现,类似于之前的场景。

@iRohitBhatia BrowserHistory 还允许您进行服务器端渲染,因为服务器可以访问完整的 URL。服务器无权访问#.
2021-06-11 02:04:03
另一点 - 如果您需要在页面上进行锚点导航(location.hash 通常是专为并应该开箱即用的),则实现起来有点困难。
2021-06-13 02:04:03

SERVER SIDE: HashRouter 在 URL 中使用哈希符号,它的作用是在服务器请求中忽略所有后续 URL 路径内容(即您发送“www.mywebsite.com/#/person/john”服务器获取“www .mywebsite.com”。因此,服务器将返回 pre # URL 响应,然后 post # 路径将由您的客户端react应用程序解析处理。

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

刷新页面会导致浏览器使用当前路由向服务器发送 GET 请求。# 用于阻止我们发送该 GET 请求。我们使用 BrowserRouter 是因为我们希望将 GET 请求发送到服务器。为了在服务器上渲染路由器,我们需要一个位置——我们需要路由。该路由将在服务器上用于告诉路由器要渲染什么。当您想以同构方式渲染路由时,将使用 BrowserRouter。

最重要的是要注意。
2021-05-30 02:04:03
您是说 HashBrowser 只能由 SPA(单页应用程序)使用,而 BrowserRouter 可以由 SPA 和多页应用程序(从服务器返回的不同页面)使用?
2021-06-04 02:04:03

无论BrowserRouterHashRouter组件是在阵营第4代路由器作为子类介绍Router类。简单地,BrowserRouter将 UI 与浏览器中的当前 URL 同步,这是通过 HTML-5 History API 完成的。另一方面,HashRouter使用 URL 的 Hash 部分进行同步。

“用例”

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

BrowserRouter:当我们有服务后端的大型生产就绪应用程序时,建议使用<BrowserRouter>.

书籍参考:学习 React:使用 React 和 Redux 进行功能性 Web 开发 作者:Alex Banks、Eve Porcello

你的意思是“小”SPA(单页)应用程序,并告诉 BrowserRouter 可以被多页应用程序使用吗?
2021-05-27 02:04:03
Imho“HashRouter”与“BrowserRouter”与“小型”与“大型生产就绪”应用程序无关。在大型生产就绪应用程序中使用 HashRouter 既没有限制也没有性能问题。这完全是关于特定用例、需求和最终的架构。无服务器生产应用程序是真实存在的。
2021-06-12 02:04:03