diff --git a/packages/react-router-dom/docs/api/Link.md b/packages/react-router-dom/docs/api/Link.md index bf63953fe2..fae99dc5ce 100644 --- a/packages/react-router-dom/docs/api/Link.md +++ b/packages/react-router-dom/docs/api/Link.md @@ -6,6 +6,7 @@ Provides declarative, accessible navigation around your application. import { Link } from 'react-router-dom' About +Disabled // renders without a href attribute ``` ## to: string diff --git a/packages/react-router-dom/modules/Link.js b/packages/react-router-dom/modules/Link.js index 1f53d67ab3..08c6376588 100644 --- a/packages/react-router-dom/modules/Link.js +++ b/packages/react-router-dom/modules/Link.js @@ -15,7 +15,7 @@ class Link extends React.Component { to: PropTypes.oneOfType([ PropTypes.string, PropTypes.object - ]).isRequired + ]) } static defaultProps = { @@ -58,6 +58,10 @@ class Link extends React.Component { render() { const { replace, to, innerRef, ...props } = this.props // eslint-disable-line no-unused-vars + if (to == null) { + return + } + const href = this.context.router.history.createHref( typeof to === 'string' ? { pathname: to } : to ) diff --git a/packages/react-router-dom/modules/__tests__/Link-test.js b/packages/react-router-dom/modules/__tests__/Link-test.js index e022d0d846..76c573d622 100644 --- a/packages/react-router-dom/modules/__tests__/Link-test.js +++ b/packages/react-router-dom/modules/__tests__/Link-test.js @@ -25,6 +25,50 @@ describe('A ', () => { expect(href).toEqual('/the/path?the=query#the-hash') }) + describe('when the "to" prop is unspecified', () => { + it('returns an anchor tag without a href', () => { + const node = document.createElement('div') + + ReactDOM.render(( + + link + + ), node) + + const href = node.querySelector('a').getAttribute('href') + + expect(href).toEqual(null) + }) + + it('omits href prop', () => { + const node = document.createElement('div') + + ReactDOM.render(( + + link + + ), node) + + const href = node.querySelector('a').getAttribute('href') + + expect(href).toEqual(null) + }) + + it('passes down other props', () => { + const node = document.createElement('div') + + ReactDOM.render(( + + link + + ), node) + + const className = node.querySelector('a').getAttribute('class') + + expect(className).toEqual('link-class') + }) + }) + it('exposes its ref via an innerRef prop', done => { const node = document.createElement('div')