React 中的 HashRouter 和 BrowserRouter 有什么区别? [英] What is the difference between HashRouter and BrowserRouter in React?

问题描述

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

我正在阅读 React Router 4 from here

在这篇文章中，作者谈到了和

这是他提到的:

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

BrowserRouter，它使用 HTML5 历史 API 来呈现组件.历史可以通过 pushState 和 replaceState 修改.可以在此处找到更多信息

现在，我不明白两者的意义和用例，就像他说历史可以通过 pushState 和 replaceState 修改 和它使用哈希值是什么意思一样呈现组件的 URL

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

解决方案

BrowserRouter

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

此外，设置可能涉及服务器端渲染，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，类似于之前的场景.

I am new to programming which makes things slightly difficult for me to understand if I read the official docs.

I was reading about React Router 4 from here

In this article, the author was talking about <HashRouter> and <BrowserRouter>

This is what he mentioned:

HashRouter basically it uses the hash in the URL to render the component. Since I was building a static one-page website, I needed to use this.

BrowserRouter, it uses HTML5 history API to render the component. The history can be modified via pushState and replaceState. More information can be found here

Now, I don't get the significance and use cases for both, Like what does he mean when he says history can be modified via pushState and replaceState and it uses the hash in the URL to render the component

While the first explanation for BrowserRouter is entirely vague to me, the second explanation about HashRouter also doesn't make sense, like why would someone use Hash (#) in the url to render the component?

解决方案

BrowserRouter

It uses history API, i.e. it's unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other route on server side. On client side, window.location.pathname is parsed by React router. React router renders a component that it was configured to render for /react/route.

Additionally, the setup may involve server-side rendering, index.html may contain rendered components or data that are specific to current route.

HashRouter

It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing.

Backward-compatible single-page application can use it as example.com/#/react/route. The setup cannot be backed up by server-side rendering because it's / path that is served on server side, #/react/route URL hash cannot be read from server side. On client side, window.location.hash is parsed by React router. React router renders a component that it was configured to render for /react/route, similarly to BrowserRouter.

Most importantly, HashRouter use cases aren't limited to SPA. A website may have legacy or search engine-friendly server-side routing, while React application may be a widget that maintains its state in URL like example.com/server/side/route#/react/route. Some page that contains React application is served on server side for /server/side/route, then on client side React router renders a component that it was configured to render for /react/route, similarly to previous scenario.

这篇关于React 中的 HashRouter 和 BrowserRouter 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！