当前位置: 首页 > 知识库问答 >
问题:

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

刘曾琪
2023-03-14

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

我在这里读到反应路由器4

在本文中,作者讨论的是

这就是他提到的:

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

浏览器路由器,它使用HTML5历史API来呈现组件。可以通过pushState和replace eState修改历史记录。更多信息可以在这里找到

现在,我不明白两者的意义和用例,比如他说历史可以通过pushState和replace State修改,它使用URL中的哈希来呈现组件,这是什么意思

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


共有3个答案

翁和颂
2023-03-14

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

郎长卿
2023-03-14

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

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

胡昊
2023-03-14

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

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

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

向后兼容的单页应用程序可以将其用作example.com/#/react/route。无法通过服务器端呈现备份安装程序,因为它是在服务器端提供的/path,#/react/route URL散列无法从服务器端读取。在客户端,window.location.hash由React路由器解析。React-router渲染其配置为为为/React/route渲染的组件,类似于BrowserRouter

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

 类似资料:
  • 问题内容: 我是编程的新手,如果我阅读了官方文档,这会使我很难理解。 我从这里阅读有关React Router 4的内容 在这篇文章中,作者在谈论和 这就是他提到的 HashRouter 基本上使用URL中的哈希来呈现组件。由于我正在构建一个静态的单页网站,因此需要使用它。 BrowserRouter ,它使用HTML5历史记录API呈现组件。可以通过pushState和replaceState修

  • 本文向大家介绍浅谈react-router HashRouter和BrowserRouter的使用,包括了浅谈react-router HashRouter和BrowserRouter的使用的使用技巧和注意事项,需要的朋友参考一下 官网推荐的是BrowserRouter,但是此方式需要服务器配合,而且有点不好的是重定向只能到首页,无法停留在当前页,具体用法很简单,举例说明。 HashRouter

  • 问题内容: 在 不 覆盖shouldComponentUpdate 的组件中,forceUpdate和setState之间是否有任何区别? 更新:我已经知道文档说了什么,不建议使用forceUpdate来做到这一点。我只是想加深对正在发生的事情的了解。我想知道为什么吗?而且我已经知道setState将传递的对象(状态“ delta”(类似于SQL更新))与当前状态对象合并。 假设有一个简单的用例:

  • 本文向大家介绍React Native和React有什么区别?相关面试题,主要包含被问及React Native和React有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 主要是底层 renders 层不同,React 使用的是 Visual DOM,React Native 替换成了native 组件。

  • 问题内容: 我正在观看有关React的Pluralsight课程,并且讲师指出,不应更改道具。我现在正在阅读有关道具与状态的文章(uberVU / react-guide),它说 道具和状态更改都会触发渲染更新。 文章稍后会说: 道具(属性的缩写)是组件的配置,如果可以的话,可以选择它的选项。它们是从上方接收的,并且是不变的。 所以道具可以改变,但它们应该是不变的? 什么时候应该使用道具,什么时候

  • 本文向大家介绍在React中组件和元素有什么区别?相关面试题,主要包含被问及在React中组件和元素有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 组件首字母大写 组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数