HashRouter与BrowserRouter

Question

我是编程的新手,如果我阅读官方文档,我会很难理解.

我从这里读到了React Router 4

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

这就是他提到的

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

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

现在,我没有得到两者的重要性和用例.就像他说可以通过pushState和replaceState修改历史记录时的意思一样,它使用URL中的哈希来呈现组件

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

Answer 1

BrowserRouter

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

另外,设置可以涉及服务器端呈现,index.html可以包含特定于当前路由的呈现的组件或数据.

HashRouter

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

向后兼容的单页面应用程序可以将其用作example.com/#/react/route.服务器端渲染无法备份设置,因为它是服务器端提供的/ path,#/ react/route URL hash无法从服务器端读取.在客户端,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呈现,类似于先前的方案.

Answer 2

服务器端: HashRouter使用的URL的哈希符号,它具有所有后续的URL路径内容的影响在服务器的请求被忽略(即发送"www.mywebsite.com/#/person/john"服务器获得"WWW .mywebsite.com".结果服务器将返回pre#URL响应,然后post #path将由客户端响应应用程序解析.

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

Answer 3

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

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

在这种情况下，我们最好使用 HASH 路由 (#)。# 我们在 html 页面上使用它，用于遍历 HTML 内容，并且不会导致服务器请求。

在上面的场景中，我们可以使用HashRouting，即#后面出现的所有url，我们可以让我们的路由规则像SPA一样工作。

Answer 4

选择“哈希路由器”而不是“浏览器路由器”的主要用例场景是在生产环境中。假设我们有这个网址“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 5

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

Answer 6

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

Answer 7

“用例”

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

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

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

Answer 8

使用history.push()评论BrowserRouter与Router 参考文章https://www.techiediaries.com/react/react-router-5-4-tutorial-examples/#React_Router_5_Routers_BrowserRouter_vs_HashRouter

\n

\n

\xe2\x80\x9c如果您使用的是可以处理动态 URL 的动态服务器，则\n您需要使用 BrowserRouter 组件，但如果您使用的是\n仅提供静态文件的服务器，则\n需要使用 HashRouter 组件这种情况\xe2\x80\x9d

\n

\n

HashRouter历史记录的限制

\n

我之前误解了https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md中 HashRouter 文章顶部的注释

\n

\n

由于此技术仅用于支持旧版浏览器，因此我们\n鼓励您将服务器配置为使用 BrowserHistory\n。

\n

\n

一般来说，不鼓励使用 HashRouter，但作者并不推荐 HashRouter 仅在您需要 location.key 或 location.state 支持的情况下。

\n