React 是一个流行的JavaScript库,用于构建用户界面,而React Router
是为 React 应用程序提供路由功能的常用解决方案之一。
React Router是一个用于构建路由的库,它提供了核心的API,例如Router
、Route
和Switch
。它允许开发者将不同的组件与特定的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。
结语
希望本文带给您有价值的信息。