1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/lib/link.js

113 lines
2.9 KiB
JavaScript
Raw Normal View History

import { resolve } from 'url'
import React, { Component, Children, PropTypes } from 'react'
import Router from './router'
import { warn, execOnce, getLocationOrigin } from './utils'
2016-10-06 07:07:41 +00:00
export default class Link extends Component {
constructor (props) {
super(props)
this.linkClicked = this.linkClicked.bind(this)
}
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.element,
(props, propName) => {
const value = props[propName]
if (typeof value === 'string') {
warnLink(`Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>`)
}
return null
}
]).isRequired
}
2016-10-06 07:07:41 +00:00
linkClicked (e) {
if (e.target.nodeName === 'A' &&
(e.metaKey || e.ctrlKey || e.shiftKey || (e.nativeEvent && e.nativeEvent.which === 2))) {
2016-10-06 07:07:41 +00:00
// ignore click for new tab / new window behavior
return
}
let { href, as } = this.props
2016-10-06 07:07:41 +00:00
if (!isLocal(href)) {
// ignore click if it's outside our scope
return
}
const { pathname } = window.location
href = resolve(pathname, href)
as = as ? resolve(pathname, as) : href
2016-10-06 07:07:41 +00:00
e.preventDefault()
// avoid scroll for urls with anchor refs
let { scroll } = this.props
if (scroll == null) {
2016-12-28 05:27:52 +00:00
scroll = as.indexOf('#') < 0
}
2016-10-06 07:07:41 +00:00
// straight up redirect
2016-12-28 05:27:52 +00:00
Router.push(href, as)
.then((success) => {
if (!success) return
2016-12-22 08:17:50 +00:00
if (scroll) window.scrollTo(0, 0)
})
.catch((err) => {
if (this.props.onError) this.props.onError(err)
})
2016-10-06 07:07:41 +00:00
}
2017-02-15 14:01:03 +00:00
prefetch () {
if (!this.props.prefetch) return
if (typeof window === 'undefined') return
// Prefetch the JSON page if asked (only in the client)
const { pathname } = window.location
const href = resolve(pathname, this.props.href)
Router.prefetch(href)
}
componentDidMount () {
this.prefetch()
}
componentDidUpdate (prevProps) {
if (this.props.href !== prevProps.href) {
this.prefetch()
}
}
2016-10-06 07:07:41 +00:00
render () {
2017-02-15 14:01:03 +00:00
let { children } = this.props
// Deprecated. Warning shown by propType check. If the childen provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = <a>{children}</a>
}
2016-10-06 07:07:41 +00:00
// This will return the first child, if multiple are provided it will throw an error
const child = Children.only(children)
const props = {
onClick: this.linkClicked
}
2016-10-06 07:07:41 +00:00
// If child is an <a> tag and doesn't have a href attribute we specify it so that repetition is not needed by the user
if (child.type === 'a' && !('href' in child.props)) {
props.href = this.props.as || this.props.href
}
2016-10-06 07:07:41 +00:00
return React.cloneElement(child, props)
2016-10-06 07:07:41 +00:00
}
}
function isLocal (href) {
const origin = getLocationOrigin()
return !/^(https?:)?\/\//.test(href) ||
2016-10-06 07:07:41 +00:00
origin === href.substr(0, origin.length)
}
const warnLink = execOnce(warn)