HashRouter与BrowserRouter

Question

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

我正在读有关React Router 4 from here

在本文中，作者谈论的是<HashRouter>和<BrowserRouter>

这就是他提到的

HashRouter 基本上，它使用URL中的哈希值来呈现组件。由于我建立的是静态的一页纸网站，因此需要使用它。

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

现在，我都没有这两者的意义和用例，就像他说历史可以通过pushState和replaceState 修改并且使用呈现组件的网址

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

Answer 1

if(iAmTrue == true) { //do this } else if(theOtherIAmTrue == true) { //do this } else { //do this because everything else was not true }

它使用history API，也就是说，它不适用于旧版浏览器（IE 9及更低版本和同期版本）。客户端React应用程序能够维护诸如 example.com/react/route 之类的干净路由，但是需要Web服务器的支持。通常，这意味着应该为单页应用程序配置Web服务器，即，将相同的if(n1 + n2 == 666) { System.out.println("Nice try, Satan"); } else { //Put your other print message(s) here. } 用于服务器端的 / react / route 路径或任何其他路由。在客户端，BrowserRouter由React路由器解析。 React router渲染一个已配置用于 / react / route 的组件。

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

window.location.pathname

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

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

最重要的是，window.location.hash用例不仅限于SPA。网站可能具有旧版或搜索引擎友好的服务器端路由，而React应用程序可能是在URL中维护其状态的小部件，例如 example.com/server/side/route#/react/route 。在服务器端为 / server / side / route 提供了一些包含React应用程序的页面，然后在客户端，React路由器会渲染一个配置为针对 / react / route < / em>，与之前的情况类似。

Answer 2

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

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

Answer 3

刷新页面会使浏览器使用当前路由向服务器发送GET请求。 使用＃号阻止我们发送该GET请求。我们使用BrowserRouter是因为 希望将GET请求发送到服务器。为了在服务器上渲染路由器，我们需要一个 位置-我们需要路线。该路由将在服务器上用于告诉路由器要渲染的内容。 当您要同构呈现路由时，可以使用BrowserRouter。

Answer 4

“用例”

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

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

按书引用：学习React：使用React和Redux进行功能性Web开发 夏娃·波切洛（Eve Porcello）亚历克斯·班克斯（Alex Banks）

Answer 5

BrowserRouter和HashRouter组件都是在React Router版本4中作为Router类的子类引入的。只需BrowserRouter即可将UI与浏览器中的当前URL同步，这是通过HTML-5 History API来完成的。另一方面，HashRouter使用URL的哈希部分进行同步。

Answer 6

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

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

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

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

Answer 7

基本上，如果一个人使用BrowserRouter，则可以使用诸如“ soAndSoReactPage /：id”之类的网址

例如：

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

现在，在react组件“ soAndSoReactComponent”中 然后可以使用useParams提取“ id”，因此您可以根据id显示页面“ soAndSoReactComponent”

使用HashedRouter无法做到这一点，

Answer 8

根据https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md，作者不建议在一般情况下使用HashRouter：

由于此技术仅旨在支持旧版浏览器，因此我们 鼓励您配置服务器以使用 代替。

Answer 9

选择“哈希路由器”而不是“浏览器路由器”的主要用例场景是在生产环境中。假设我们有这个网址“www.example.com/Example”。在这种情况下，一些服务器倾向于查找名称为“Example”的文件夹并最终返回 404，因为我们只有单页应用程序 index.html。因此，为了避免这种混淆，我们使用“www.example.com/#/Example”和哈希路由器的亮点。

资源：https://www.techblogsnews.com/post/browser-router-vs-hash-router-in-react-js

Answer 10

HashHistory和BrowserHistory都有一项工作，那就是告诉React在屏幕上呈现URL的哪一部分。

BrowserHistory告诉您对TLD之后的网址外观部分（即.com，.org等）的反应。 HashHistory非常相似。它告诉React在URL中找到一个哈希，并渲染位于哈希之后的url部分。

请观看此视频，以获取更详细的了解-https://www.youtube.com/watch?v=cdUyEou0LHg

Answer 11

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