码迷,mamicode.com
首页 > 其他好文 > 详细

react-router与react-router-dom使用时的区别

时间:2020-02-03 22:20:22      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:path   port   基础   end   erro   的区别   history   pack   基础上   

1、React-router与React-router-dom的API对比

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

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

 

 2、React-router与React-router-dom的功能对比

React-router:实现了路由的核心功能

React-router-dom:基于React-router,加入了一些在浏览器运行下的一些功能,

  例如:Link组件会渲染一个a标签,

       BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步,

       HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步

 

 3、React-router与React-router-dom的写法对比

React-router不能通过操作dom控制路由,此时还需引入React-router-dom

import {Switch, Route, Router} from ‘react-router‘;
import {HashHistory, Link} from ‘react-router-dom‘;

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

import {Swtich, Route, Router, HashHistory, Link} from ‘react-router-dom‘;

 

 4、React-router与React-router-dom的路由跳转对比

React-router:router4.0以上版本用this.props.history.push(‘/path‘)实现跳转;

       router3.0以上版本用this.props.router.push(‘/path‘)实现跳转

React-router-dom:直接用this.props.history.push(‘/path‘)就可以实现跳转

 

总结:

  在使用React的大多数情况下,我们会想要通过操作dom来控制路由,例如点击一个按钮完成跳转,这种时候使用React-router-dom就比较方便。

  安装也很简单:npm install   react-router-dom --save 

  从react-router-dompackage.json的依赖就可以看出:react-router-dom是依赖react-router的,所以我们使用npm安装react-router-dom的时候,不需要npm安装react-router。

技术图片
//react-router-dom的依赖
"dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.2",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.5.4",
    "react-router": "^4.2.0",
    "warning": "^3.0.0"
  }
技术图片

 

react-router与react-router-dom使用时的区别

标签:path   port   基础   end   erro   的区别   history   pack   基础上   

原文地址:https://www.cnblogs.com/tianyamoon/p/12257605.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!