diff --git a/docs/API.md b/docs/API.md index 98beaccbc6..7fb751060a 100644 --- a/docs/API.md +++ b/docs/API.md @@ -113,6 +113,7 @@ A [location descriptor](https://github.com/reactjs/react-router/blob/master/docs * `query`: An object of key:value pairs to be stringified. * `hash`: A hash to put in the URL, e.g. `#a-hash`. * `state`: State to persist to the `location`. +* If it is not specified, an anchor tag without an `href` attribute will be rendered. _Note: React Router currently does not manage scroll position, and will not scroll to the element corresponding to `hash`._ diff --git a/modules/Link.js b/modules/Link.js index 717198185a..e808758e07 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -55,7 +55,7 @@ const Link = React.createClass({ }, propTypes: { - to: oneOfType([ string, object ]).isRequired, + to: oneOfType([ string, object ]), query: object, hash: string, state: object, @@ -112,6 +112,9 @@ const Link = React.createClass({ const { router } = this.context if (router) { + // If user does not specify a `to` prop, return an empty anchor tag. + if (to == null) { return } + const location = createLocationDescriptor(to, { query, hash, state }) props.href = router.createHref(location) diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js index 39e78c1b28..aac8d3c315 100644 --- a/modules/__tests__/Link-test.js +++ b/modules/__tests__/Link-test.js @@ -455,4 +455,45 @@ describe('A ', function () { }) }) + describe('when the "to" prop is unspecified', function () { + class App extends Component { + render() { + return ( +
+ Blank Link + + Kittens +
+ ) + } + } + + it('returns an anchor tag without an href', function (done) { + render(( + + + + ), node, function () { + const link1 = node.querySelectorAll('a')[0] + const link2 = node.querySelectorAll('a')[1] + const link3 = node.querySelectorAll('a')[2] + expect(link1.href).toEqual('') + expect(link2.href).toEqual('') + expect(link3.href).toEqual('') + done() + }) + }) + + it('passes down other props', function (done) { + render(( + + + + ), node, function () { + const link3 = node.querySelectorAll('a')[2] + expect(link3.className).toEqual('kitten-link') + done() + }) + }) + }) })