react-router与react-router-dom区别

简介: React 是一个流行的JavaScript库,用于构建用户界面,而`React Router`是为 React 应用程序提供路由功能的常用解决方案之一。React Router是一个用于构建路由的库,它提供了核心的API,例如`Router`、`Route`和`Switch`。它允许开发者将不同的组件与特定的URL路径相关联,并根据用户的导航选择加载相应的组件。React Router通过管理URL的变化,帮助我们在单页应用程序中实现导航和路由。然而,React Router本身并没有提供直接操作DOM进行路由跳转的API。这就是`React Router DOM`的出现背景。

React 是一个流行的JavaScript库,用于构建用户界面,而React Router是为 React 应用程序提供路由功能的常用解决方案之一。

React Router是一个用于构建路由的库,它提供了核心的API,例如RouterRouteSwitch。它允许开发者将不同的组件与特定的URL路径相关联,并根据用户的导航选择加载相应的组件。React Router通过管理URL的变化,帮助我们在单页应用程序中实现导航和路由。

然而,React Router本身并没有提供直接操作DOM进行路由跳转的API。这就是React Router DOM的出现背景。

import { Switch, Route, Router } from 'react-router';

import { Swtich, Route, BrowserRouter, HashHistory, Link } from 'react-router-dom';

1、api方面

React-router:

提供了路由的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的api;

React-router-dom:

提供了BrowserRouter、Route、Link等api,可以通过dom操作触发事件控制路由。

Link组件,会渲染一个a标签;BrowserRouter和HashRouter组件,前者使用pushState和popState事件构建路由,后者使用 hash 和 hashchange 事件构建路由。

2、动态路由跳转

React-router:

router4.0以上 this.props.history.push('/path') 实现跳转;

router3.0以上 this.props.router.push('/path') 实现跳转;

React-router-dom:

直接用 this.props.history.push('/path') 实现跳转

3、使用区别

react-router-dom在react-router的基础上扩展了可操作dom的api。

Swtich 和 Route 都是从react-router中导入了相应的组件并重新导出,没做什么特殊处理。

react-router-dom中package.json依赖中存在对react-router的依赖,故此,不需要npm安装react-router。

  • 可直接 npm 安装 react-router-dom,使用其api。

结语

希望本文带给您有价值的信息。

目录
相关文章
|
1月前
|
JavaScript 前端开发 API
DOM驱动和数据驱动的区别
DOM驱动和数据驱动的区别
17 0
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
30 0
|
4月前
|
前端开发 JavaScript 算法
深入理解前端框架:解析 React 的虚拟 DOM
虚拟 DOM 是 React 前端框架的核心概念之一。本文将深入探讨虚拟 DOM 的原理和应用,帮助读者更好地理解 React 框架的工作机制,并学习如何高效地使用虚拟 DOM 进行前端开发。
37 1
|
3天前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和"key"逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
13天前
|
前端开发 JavaScript API
Vue.Draggable 和 React Beautiful DND 有什么区别
Vue.Draggable 和 React Beautiful DND 是两个用于 Vue.js 和 React 的拖拽排序库。Vue.Draggable 提供 Vue 指令,适合 Vue 应用,支持列表排序和自定义数据处理,具有多种事件回调和配置选项。React Beautiful DND 则为 React 提供组件,能处理复杂拖拽场景,通过回调函数更新状态,配置选项包括限制拖拽范围和自定义动画。
|
17天前
|
前端开发 JavaScript 开发者
React的函数组件与类组件:探索两者之间的区别
【4月更文挑战第25天】React提供函数组件和类组件,两者在语法、状态管理、生命周期和性能优化上有所不同。函数组件简单且易于理解,使用 Hooks 可添加状态管理;类组件支持复杂状态管理和生命周期方法,适用于需要精细控制更新的场景。随着 Hooks 的发展,函数组件功能增强,成为更多开发者的首选。选择组件类型应根据实际需求权衡。
|
23天前
|
JavaScript 前端开发 开发者
你知道 React 和 Vue 的区别?
【4月更文挑战第16天】React与Vue是两种流行的前端框架,各有特色。React是JavaScript库,强调组件化和函数式编程,使用虚拟DOM提升性能;Vue是渐进式框架,提供全面解决方案,更易上手。React采用单向数据流和状态管理库如Redux,Vue则有双向数据绑定和响应式系统。组件通信方面,React依赖props和context,Vue更灵活,提供插槽和提供/注入。虚拟DOM实现上,React注重效率,Vue强调易用性。学习曲线方面,React社区活跃但学习难度稍大,Vue文档清晰,易于入门。选择框架应考虑项目需求、团队技能和个人偏好。
9 0
|
27天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
17 0
|
1月前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
vue和react的区别
vue和react的区别