HashRouter 和 BrowserRouter 在 React 中的区别是什么？

我是编程的新手，如果我阅读官方文件，就会觉得有点难以理解。

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

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

这就是他提到的:

HashRouter 基本上使用 URL 中的 hash 来呈现组件。因为我正在建立一个静态的一页网站，我需要使用这一点。

BrowserRouter ，它使用 HTML5历史 API 来呈现组件。可以通过 pushState 和 replace State 修改历史记录。点击这里查看更多信息

现在，我不明白这两者的意义和用例，就像他说的 可以通过 pushState 和 replace State 修改 history和 它使用 URL 中的散列来呈现组件是什么意思

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

186956 次浏览
小开

服务器端: 哈希路由器在 URL 中使用一个哈希符号，这会导致服务器请求中忽略所有后续的 URL 路径内容(即发送“ www.mywebsite.com/#/person/john"”，服务器得到“ www.mywebsite.com”)。因此，服务器将返回 pre # URL 响应，然后 post # 路径将由客户端响应应用程序处理(或解析)。

客户端: BrowserRouter 不会将 # 符号追加到 URL 中，但是当您尝试链接到一个页面或重新加载一个页面时会产生问题。如果显式路由存在于您的客户端反应应用程序，但不在您的服务器上，重新加载和链接(任何直接打击服务器)将返回404未发现错误。

小开
最佳答案

BrowserRouter

它使用 历史空气污染指数，也就是说，它不适用于传统浏览器(IE9和较低版本以及同时代的浏览器)。客户端反应应用程序能够维护干净的路由，如 Example.com/react/route，但需要由网络服务器支持。通常这意味着 web 服务器应该配置为单页应用，也就是说，服务器端的 /反应/路线路径或任何其他路径都使用相同的 index.html。在客户端，window.location.pathname由 React 路由器解析。React 路由器呈现它被配置为为 /反应/路线呈现的组件。

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

HashRouter

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

向后兼容的单页应用可以使用它作为 ABc2。该设置无法通过服务器端呈现进行备份，因为它是服务器端的 /路径，无法从服务器端读取 #/反应/路线 URL 散列。在客户端，window.location.hash由 React 路由器解析。React 路由器呈现一个组件，它被配置为为 /反应/路线呈现，类似于 BrowserRouter。

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

小开

BrowserRouter和 HashRouter组件都作为 Router类的子类引入到 React Routerver.4中。简单地说，BrowserRouter将用户界面与浏览器中的当前 URL 同步，这是通过 HTML-5历史 API 实现的。另一方面，HashRouter使用 URL 的哈希部分进行同步。

小开

“用例”

HashRouter: 当我们有不需要后端的小客户端应用程序时，我们可以使用 HashRouter，因为当我们在 URL/location bar 浏览器中使用散列时，不会发出服务器请求。

BrowserRouter: 当我们有服务于后端的大型生产准备应用程序时，建议使用 <BrowserRouter>。

参考书目: Learning React: Functional Web Development with React and Redux 作者: Alex Banks，Eve Porcello

小开

我想再添加一个用例。 当使用 BrowserRouter 或 Router 时，它可以在我们的节点服务器上正常工作，因为它能够理解客户端路由(预配置)。

但是，当我们在 Apache 服务器上部署构建 React 应用程序时(比如说在 GoDaddy 上部署 PHP) ，路由不会像预期的那样工作。它将降落到404，为此我们需要配置 . htaccess文件。之后还为我每次点击/url，其发送请求到服务器。

在这种情况下，我们更好地使用 HASH Routing (#)。# 我们在 HTML 页面上使用这个，用于遍历 HTML 内容，它不会导致服务器请求。

在上面的场景中，我们可以使用 HashRouting，即在 # 之后出现的所有 URL，我们可以将路由规则作为 SPA。

小开

刷新页面会导致浏览器使用当前路由向服务器发送 GET 请求。 使用 # 是为了防止我们发送 GET 请求 希望将 GET 请求发送到服务器。为了呈现服务器上的路由器，我们需要一个 我们需要路线。这个路由将在服务器上用来告诉路由器要呈现什么。 当您希望以同构方式呈现路由时，可以使用 BrowserRouter。

小开

基本上，如果使用 BrowserRouter，可以使用“ soAndSoReactPage/: id”这样的 URL

例如:

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

现在，在反应组件“ soAndSoReactComponent”中 然后可以使用 useParams 提取“ id”，因此可以按照 id 显示页面“ soAndSoReactComponent”

这样的事情不能用 HashedRouter 来完成,

小开

评论 BrowserRouter 与带有 history. push ()的路由器指的是文章 https://www.techiediaries.com/react/react-router-5-4-tutorial-examples/#React_Router_5_Routers_BrowserRouter_vs_HashRouter

”如果您使用的是能够处理动态 URL 的动态服务器，那么 您需要使用 BrowserRouter 组件，但是如果您正在使用 只提供静态文件的服务器，那么 HashRouter 组件就是 在这种情况下应该使用什么”

哈希路由器历史记录的限制

我以前在 https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md中的 HashRouter 文章的顶部提到过 被误解了

由于此技术仅用于支持遗留浏览器，因此我们 鼓励您将服务器配置为使用 BrowserHistory 取而代之。

一般来说，使用 HashRouter 是令人沮丧的，但是如果您需要对 location.key 或 location.state 的支持，那么作者不推荐使用 HashRouter。

小开

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

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


提交答案