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。

结语

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

目录
相关文章
|
3月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
173 13
|
5月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
211 67
|
11月前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
843 58
|
12月前
|
前端开发 开发者 UED
React 18 与之前版本的主要区别
【10月更文挑战第12天】 总的来说,React 18 的这些区别体现了 React 团队对于提升应用性能、用户体验和开发效率的持续努力。开发者需要适应这些变化,充分利用新特性来构建更出色的应用。同时,随着技术的不断发展,React 也将继续演进,为开发者带来更多的创新和便利。
531 58
|
12月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
518 1
真实DOM和虚拟DOM有哪些区别?
|
11月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
11月前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
171 1
|
12月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
11月前
|
开发框架 JavaScript 前端开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
138 0
|
11月前
|
JavaScript 前端开发 Android开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
207 0