小编典典

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

all

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

我从这里阅读React Router 4

在这篇文章中,作者谈到了<HashRouter><BrowserRouter>

这是他提到的:

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

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

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

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


阅读 48

收藏
2022-08-15

共1个答案

小编典典

BrowserRouter

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

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

HashRouter

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

向后兼容的单页应用程序可以将其用作 _example.com/#/react/route_ 。服务器端渲染无法备份设置,因为它是在服务器端提供的 /
路径,无法从服务器端读取 #/react/route URL 哈希。 在客户端,window.location.hash由 React
路由器解析。React 路由器渲染一个它被配置为为 /react/route 渲染的组件,类似于BrowserRouter.

最重要的是,HashRouter用例不仅限于 SPA。一个网站可能有遗留或搜索引擎友好的服务器端路由,而 React 应用程序可能是一个在 URL
中维护其状态的小部件,例如 _example.com/server/side/route#/react/route_ 。一些包含 React
应用程序的页面在服务器端为 /server/side/route 提供服务,然后在客户端 React 路由器呈现一个它被配置为为
/react/route 呈现的组件,类似于之前的场景。

2022-08-15