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。

结语

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

目录
相关文章
|
18天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
20 1
|
27天前
|
JavaScript 算法 前端开发
vue和react的diff算法的区别
vue和react的diff算法的区别
|
9天前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
12 0
|
9天前
|
网络架构
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
20 0
|
1月前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript 前端开发
react的参数值和Vue的参数值有什么区别
react的参数值和Vue的参数值有什么区别
|
19天前
|
XML JavaScript 前端开发
vue和react的区别
vue和react的区别
18 0
|
1月前
|
XML JavaScript 前端开发
Vue和React的区别
Vue和React的区别
|
2月前
|
前端开发 JavaScript API
Vue.Draggable 和 React Beautiful DND 有什么区别
Vue.Draggable 和 React Beautiful DND 是两个用于 Vue.js 和 React 的拖拽排序库。Vue.Draggable 提供 Vue 指令,适合 Vue 应用,支持列表排序和自定义数据处理,具有多种事件回调和配置选项。React Beautiful DND 则为 React 提供组件,能处理复杂拖拽场景,通过回调函数更新状态,配置选项包括限制拖拽范围和自定义动画。
|
2月前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和"key"逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。