react-router源码分析---------Navlink
【react-router源码分析---------Navlink】1.NavLink是对Link的二次包装，Link有的属性他都有。
import React from "react";
import PropTypes from "prop-types";
import Route from "./Route";
import Link from "./Link";
/**
* A wrapper that knows if it's "active" or not.
*/
const NavLink = ({
to,
exact,
strict,
location,
activeClassName,
className,
activeStyle,
style,
isActive: getIsActive,
"aria-current": ariaCurrent,
...rest
}) => {
const path = typeof to === "object" ? to.pathname : to;
// Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
const escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
return (
{
const isActive = !!(getIsActive ? getIsActive(match, location) : match);
return (
i).join(" ")
: className
}
style={isActive ? { ...style, ...activeStyle } : style}
aria-current={(isActive && ariaCurrent) || null}
{...rest}
/>
);
}}
/>
);
};
NavLink.propTypes = {
to: Link.propTypes.to,
exact: PropTypes.bool,
strict: PropTypes.bool,
location: PropTypes.object,
activeClassName: PropTypes.string,
className: PropTypes.string,
activeStyle: PropTypes.object,
style: PropTypes.object,
isActive: PropTypes.func,
"aria-current": PropTypes.oneOf([
"page",
"step",
"location",
"date",
"time",
"true"
])
};
NavLink.defaultProps = {
activeClassName: "active",
"aria-current": "page"
};
export default NavLink;
推荐阅读
- 如何寻找情感问答App的分析切入点
- D13|D13 张贇 Banner分析
- 自媒体形势分析
- 2020-12(完成事项)
- Android事件传递源码分析
- Python数据分析(一)（Matplotlib使用）
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- 泽宇读书会——如何阅读一本书笔记
- Java内存泄漏分析系列之二（jstack生成的Thread|Java内存泄漏分析系列之二：jstack生成的Thread Dump日志结构解析）
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)