react-router 里的 routerLink标签和a 标签有什么区别

先看Link点击事件handleClick部分源码

      if (_this.props.onClick) _this.props.onClick(event);if (!event.defaultPrevented && // onClick prevented defaultevent.button === 0 && // ignore everything but left clicks!_this.props.target && // let browser handle "target=_blank" etc.!isModifiedEvent(event) // ignore clicks with modifier keys) {event.preventDefault();var history = _this.context.router.history;var _this$props = _this.props,replace = _this$props.replace,to = _this$props.to;if (replace) {history.replace(to);} else {history.push(to);}}

Link做了3件事情：

有onclick那就执行onclick
click的时候阻止a标签默认事件（这样子点击[123]()就不会跳转和刷新页面）
再取得跳转href（即是to），用history（前端路由两种方式之一，history & hash）跳转，此时只是链接变了，并没有刷新页面

react-router 里的 routerLink标签和a 标签有什么区别相关推荐

React Router学习
React Router教程本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
React路由管理 —— React Router 总结
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢, ...
面试官：说说React Router有几种模式？实现原理？
一.是什么在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下: 改变 url 且不让浏览器像服务器发送请求在不刷新 ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router教程–如何使用代码示例渲染，重定向，切换，链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...

react-router 里的 routerLink标签和a 标签有什么区别

react-router 里的 routerLink标签和a 标签有什么区别相关推荐

最新文章

热门文章