react-router原理之路径匹配一文中讲了react-router如何根据url进行路径匹配进而完成不同的组件渲染。接下来继续讲一下如何改变url。仍旧以官网为例,演示地址
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
...
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
复制代码
可以看出Link的作用就是接受点击然后触发url地址的变更,Link组件最终在浏览器中是以何种方式存在的呢?通过查看页面的Element可以看到Link最终会转成<a>标签,上面的例子中的Link在浏览器中的样子是这样的
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/topics">Topics</a></li>
</ul>
复制代码
既然最终Link被转换成上面<a>标签的形式,那么和代码里直接写a标签有什么区别呢?
最大的区别表象体现在是否有主文档请求,<a>标签一定会出现,而Link则是通常不出现(除非特殊的配置)
Link不只是<a>标签
Link在最后渲染的时候其实是创建了<a>标签,同时添加了一个onClick的监听事件,onClick事件处理函数中做了两件事:
- 如果Link上定义了onClick方法,则执行该方法
- 判定是否应该阻止a标签的默认跳转
- 如果阻止的话,则根据replace的props值决定执行history.push还是执行history.replace。history包的地址是www.npmjs.com/package/his…,Link只负责触发url变更,Route只负责根据url渲染组件,history的作用是执行url变更,并同时通知Route重新渲染。关于history(点击这里)[https://juejin.im/post/5b06b4e4f265da0ddc0c03a4]。
- 如果不阻止的话,则其实与直接<a>标签的写法类似了,当点击操作触发时会产生主文档的请求。
render() {
....
return (
<a {...props} onClick={this.handleClick} href={href} ref={innerRef} />
);
}
handleClick = event => {
if (this.props.onClick) this.props.onClick(event);
if (
!event.defaultPrevented && // onClick prevented default
event.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();
const { history } = this.context.router;
const { replace, to } = this.props;
if (replace) {
history.replace(to);
} else {
history.push(to);
}
}
};
复制代码
Link什么情况下阻止默认行为
同时下列四个条件时就会阻止默认行为
- Link的onClick回调中不包含event.preventDefault()代码
- 点击按键是左键
- Link的props未定义target
- 点击操作触发时没有功能键(ctrl、shift等)被按下
!event.defaultPrevented && event.button === 0 && !this.props.target && !isModifiedEvent(event)
复制代码
特殊的Link
react-router中除了Link还有一个NavLink,NavLink是一种特殊的Link,它的特殊体现在当与url匹配时生成的<a>标签上会带有一些样式信息(通过activeClassName和activeStyle定义样式)。
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink>
复制代码
NavLink的特性需要做url的匹配查询,之前在讲路径匹配的时候讲到Route就是负责用来匹配路径渲染组件的,因此这里正适合引入Route来做匹配。匹配成功渲染带样式的Link,匹配失败则渲染不带样式的Link。
Route定义路径关联组件的方式有三种:
- render
- component
- children
render与component方式定义的组件当不匹配时是不会渲染组件的
children方式则只是将匹配规则传入进来,具体是否渲染由children自己定义。children的这个特性刚好符合满足NavLink的要求。
明白了NavLink的大体思路后可以去看看源码的具体实现。
NavLink具体实现
render() {
return (
<Route
path={escapedPath}
exact={exact}
strict={strict}
location={location}
children={({ location, match }) => {
const isActive = !!(getIsActive ? getIsActive(match, location) : match);
return (
<Link
to={to}
className={
isActive
? [className, activeClassName].filter(i => i).join(" ")
: className
}
style={isActive ? { ...style, ...activeStyle } : style}
aria-current={(isActive && ariaCurrent) || null}
{...rest}
/>
);
}}
/>
);
}
复制代码