AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React-38：BrowserRouter与HashRouter的区别

2021-11-14 151
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React-38：BrowserRouter与HashRouter的区别

区别一：底层原理不同

  • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
  • HashRouter使用的是URL的哈希值。

区别二：URL表现形式不一样

  • BrowserRouter的路径中没有#
  • HashRouter的路径中包含#

区别三：刷新后对路由state参数的影响

  • 刷新后BrowserRouter没有任何影响，因为state保存在history对象中。
  • HashRouter刷新后会导致路由state参数的丢失。


文章标签：
移动开发
API
关键词：
React Native区别
react.js区别
React Native hashrouter区别
答案命运
目录
相关文章
mao29955
|
27天前
|
JavaScript 前端开发 开发者
React和Vue有什么区别？
React 和 Vue 都有各自的优势和特点，开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue，它们都在不断发展和完善，为前端开发提供了强大的支持。
mao29955
68 2
德国都芳最好
|
1月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么？
React框架和Vue框架都是目前非常流行的前端JavaScript框架，它们在很多方面存在区别
德国都芳最好
42 1
跃@sir
|
1月前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
跃@sir
20 1
html的七十二变
|
2月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于：`Link` 是专门为 React 应用设计的，用于实现客户端路由导航，不会触发页面的重新加载，而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
html的七十二变
64 3
光明顶阳顶天
|
2月前
|
前端开发 开发者 UED
React 18 与之前版本的主要区别
【10月更文挑战第12天】 总的来说，React 18 的这些区别体现了 React 团队对于提升应用性能、用户体验和开发效率的持续努力。开发者需要适应这些变化，充分利用新特性来构建更出色的应用。同时，随着技术的不断发展，React 也将继续演进，为开发者带来更多的创新和便利。
光明顶阳顶天
81 2
跃@sir
|
1月前
|
开发框架 JavaScript 前端开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
跃@sir
15 0
Star时光
|
1月前
|
JavaScript 前端开发 Android开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
Star时光
18 0
明月何时照我还呀
|
3月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
49 11
前端徐徐
|
2月前
|
存储 前端开发 JavaScript
React useState 和 useRef 的区别
本文介绍了 React 中 `useState` 和 `useRef` 这两个重要 Hook 的区别和使用场景。`useState` 用于管理状态并在状态变化时重新渲染组件，适用于表单输入、显示/隐藏组件、动态样式等场景。`useRef` 则用于在渲染之间保持可变值而不触发重新渲染，适用于访问 DOM 元素、存储定时器 ID 等场景。文章还提供了具体的代码示例，帮助读者更好地理解和应用这两个 Hook。
前端徐徐
57 0
六卿
|
3月前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件，类似于类组件的`PureComponent`，用于避免不必要的渲染。`useCallback` Hook 用于缓存函数，避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数，以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果，避免重复计算。两者都可以用来优化性能，但适用场景不同：`memo`用于组件，`useMemo`和`useCallback`用于值和函数的缓存。
六卿
104 1