个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我是编程新手，如果我阅读官方文档，这会让我有点难以理解。
我正在阅读有关 React Router 4 from here 的内容
在这篇文章中，作者谈论的是 <HashRouter>和<BrowserRouter>
这就是他提到的:
HashRouter 基本上它使用 URL 中的哈希来呈现组件。由于我正在构建一个静态单页网站，因此我需要使用它。
BrowserRouter，它使用 HTML5 历史记录 API 来渲染组件。可以通过pushState和replaceState修改历史记录。更多信息可以在这里找到
现在，我不明白两者的意义和用例，就像他说历史可以通过pushState和replaceState修改时的意思一样，它使用散列渲染组件的 URL
虽然对 BrowserRouter 的第一个解释对我来说完全模糊，但关于 HashRouter 的第二个解释也没有意义，比如为什么有人会在 url 中使用 Hash (#) 来渲染组件？
最佳答案
浏览器路由器它使用 history API ，即它不适用于旧版浏览器(IE 9 及更低版本和同时代的浏览器)。客户端 React 应用程序能够维护干净的路由，例如 example.com/react/route，但需要 Web 服务器的支持。通常这意味着 Web 服务器应该配置为单页应用程序，即为 /react/route 路径或服务器端的任何其他路由提供相同的 index.html 。在客户端，window.location.pathname 由 React 路由器解析。 React 路由器渲染一个被配置为渲染 /react/route 的组件。
此外，设置可能涉及服务器端渲染，index.html 可能包含特定于当前路由的渲染组件或数据。
哈希路由器它使用 URL 哈希，对支持的浏览器或 Web 服务器没有限制。服务器端路由独立于客户端路由。
向后兼容的单页应用程序可以将其用作example.com/#/react/route。服务器端渲染无法备份该设置，因为它的 / 路径是在服务器端提供的，#/react/route URL 哈希无法从服务器端读取。在客户端，window.location.hash 由 React 路由器解析。 React router 渲染一个被配置为 /react/route 渲染的组件，类似于 BrowserRouter。
最重要的是，HashRouter 用例并不限于 SPA。网站可能具有传统的或搜索引擎友好的服务器端路由，而 React 应用程序可能是一个在 URL 中维护其状态的小部件，例如 example.com/server/side/route#/react/route 。包含 React 应用程序的某些页面在服务器端为 /server/side/route 提供服务，然后在客户端 React 路由器渲染一个配置为为 /react/route< 渲染的组件/em>，与之前的场景类似。
关于reactjs - React 中 HashRouter 和 BrowserRouter 有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51974369/
27
4
0
我想在我的 React 应用程序中使用 BrowserRouter。我已将我最顶层的组件嵌套在 BrowserRouter 标签中，如图所示: import React from 'react'; i
我读了这个声明: The BrowserRouter should be used when you have a server that will handle dynamic requests (
我想使用 basename 来分隔组件。我也有全局 url，所以我最终使用了 3 个 BrowserRouter。这会导致显示多个内容。如果我去/fruit/search，它会同时显示 Homepag
我是一个新手，无法使用react。我正在关注教程React Tutorial创建注册表单。但这样就已经过时了。我试图通过使用浏览器重定向单击链接来重定向到注册、登录和主页。本教程定义的路线如 cons
我目前在我的 app.js 文件中有这个: 在我的 CompOne 中，我想以编程方式导航到 CompTwo。我知道我可以使用 wind
我正在尝试使用 React Idle Timer 在 15 分钟后转到锁定屏幕。 我遇到的问题是重定向页面。我正在使用带有反应的 Electron 和 react BrowserRouter。因此我不
我正在构建一个 Netflix 克隆应用程序，并且正在使用 react-router-dom v5在不同页面之间切换。但是，当我单击 Link标记 Navbar.jsx ，URL 会发生变化，但相应的
在我的项目中，我必须在不更改 url 的情况下从一个组件导航到另一个组件。为此，我使用了 MemoryRouter这按预期工作。但现在同样的想法应该适用于不同的路线，即 /one和 /two .例如，
我正在尝试使用 npm run build 生成的静态index.html 文件以及react-router。 tl;dr 是;我不需要客户端服务器，我希望通过打开位于构建文件夹中的 index.ht
尝试使用 React，我决定测试 typescript 。 代码: import { BrowserRouter } from 'react-router-dom' import history f
我使用的是 React 路由在线类(class)中的以下代码: import { Router, Route, browserHistory } from 'react-router'; ReactD
我正在使用 React-router 版本 5.5.1，并尝试在我的 index.js 文件中使用它: ./src/index.js 14:8-21 'react-router' does not c
这是我第一次尝试 React。我使用 create-react-app 创建了一个项目，然后对于路由，我使用 React Router V4 for web react-router-dom . 这是
我正在从 React Router v5 升级到 v6。当我运行应用程序时，url 中没有基本名称，也没有加载任何内容，当我将/config2 添加到 url 时，一切都会显示出来。我在使用 v5 B
使用 时出现以下错误react-router-dom 版本 6 : Uncaught Error: Invalid hook call. Hooks can only be called inside
我试图了解 react-router-dom (v5) 包的 BrowserRouter 和 Router 之间的区别以及它们之间的区别下面是我的例子。 文档说: BrowserRouter A th
我是编程新手，如果我阅读官方文档，这会让我有点难以理解。 我正在阅读有关 React Router 4 from here 的内容 在这篇文章中，作者谈论的是 和 这就是他提到的: HashRoute
使用HashRouter，路由在所有情况下都能正常工作，但是当使用BrowserRouter时，刷新页面时会显示错误。 这是我封装在 HashRouter 和 BrowserRouter 下的路由代码
这是我的代码: import React from "react"; import ReactDOM from "react-dom"; import Navbar from "./component
这是我的代码: import React from "react"; import ReactDOM from "react-dom"; import Navbar from "./component
我是一名优秀的程序员,十分优秀！