From 0c5c4cbb6e048d98b975c1283052bb4ecb531d37 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:11:41 -0400 Subject: [PATCH 01/11] adds test for rendering Links that do not specify "to" prop --- modules/__tests__/Link-test.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js index 39e78c1b28..80b0e0036c 100644 --- a/modules/__tests__/Link-test.js +++ b/modules/__tests__/Link-test.js @@ -455,4 +455,30 @@ describe('A ', function () { }) }) + describe('when the "to" prop is unspecified', function () { + class App extends Component { + render() { + return ( +
+ Blank Link + +
+ ) + } + } + + 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] + expect(link1.href).toEqual('') + expect(link2.href).toEqual('') + done() + }) + }) + }) }) From ec43195140f00e4f18f6f43ac38c1c382860b337 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:12:26 -0400 Subject: [PATCH 02/11] Modifies Link to return an empty tag when no "to" prop is given. --- modules/Link.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/modules/Link.js b/modules/Link.js index 717198185a..28138514d2 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, @@ -69,7 +69,8 @@ const Link = React.createClass({ getDefaultProps() { return { onlyActiveOnIndex: false, - style: {} + style: {}, + to: '' } }, @@ -103,6 +104,8 @@ const Link = React.createClass({ render() { const { to, query, hash, state, activeClassName, activeStyle, onlyActiveOnIndex, ...props } = this.props + + warning( !(query || hash || state), 'the `query`, `hash`, and `state` props on `` are deprecated, use `. http://tiny.cc/router-isActivedeprecated' @@ -112,6 +115,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 === '') { return } + const location = createLocationDescriptor(to, { query, hash, state }) props.href = router.createHref(location) From e62a236a1782825cf2808085ba09d099b86ec714 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:12:52 -0400 Subject: [PATCH 03/11] Adds example of empty links --- examples/empty-links/app.js | 41 +++++++++++++++++++++++++++++++++ examples/empty-links/index.html | 8 +++++++ examples/index.html | 1 + 3 files changed, 50 insertions(+) create mode 100644 examples/empty-links/app.js create mode 100644 examples/empty-links/index.html diff --git a/examples/empty-links/app.js b/examples/empty-links/app.js new file mode 100644 index 0000000000..bf6267b555 --- /dev/null +++ b/examples/empty-links/app.js @@ -0,0 +1,41 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router' + +import withExampleBasename from '../withExampleBasename' + +const App = ({ children }) => ( +
+

Link to Nowhere App

+
    +
    • +
  • Nowhere
    • +
  • Index
    • +
  • Somewhere
    • +
+ + {children} +
+) + +const Index = () => ( +
+

Welcome to the index 🚀

+
+) + +const Somewhere = () => ( +
+

Somewhere

+

You are now somewhere.

+
+) + +render(( + + + + + + +), document.getElementById('example')) diff --git a/examples/empty-links/index.html b/examples/empty-links/index.html new file mode 100644 index 0000000000..9f5d67e5ec --- /dev/null +++ b/examples/empty-links/index.html @@ -0,0 +1,8 @@ + +Empty Links Example + + +

React Router Examples / Empty Links

+
+ + \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 3eef4f52c6..5ab49b0b8f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,6 +15,7 @@

React Router Examples

  • Breadcrumbs
  • Confirming Navigation
  • Dynamic Segments
    • +
  • Empty Links
  • Huge Apps (Partial App Loading)
  • Master Detail
  • Nested Animations
    • From aba859e81c54475bce9e02a6a57636a5e414434d Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:18:10 -0400 Subject: [PATCH 04/11] Adds spec for passing down of additional props --- modules/__tests__/Link-test.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js index 80b0e0036c..5648c15ae5 100644 --- a/modules/__tests__/Link-test.js +++ b/modules/__tests__/Link-test.js @@ -462,6 +462,7 @@ describe('A ', function () {
    Blank Link + Kittens
    ) } @@ -475,8 +476,22 @@ describe('A ', function () { ), node, function () { const link1 = node.querySelectorAll('a')[0] const link2 = node.querySelectorAll('a')[1] + const link3 = node.querySelectorAll('a')[1] 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() }) }) From 62858236ed3cb715c87942f95170ee44d79347d7 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:23:41 -0400 Subject: [PATCH 05/11] Updates documentation for Link. --- docs/API.md | 1 + docs/guides/IndexRoutes.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/API.md b/docs/API.md index 98beaccbc6..44322575e0 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` 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/docs/guides/IndexRoutes.md b/docs/guides/IndexRoutes.md index 680ee817f8..dc36c59984 100644 --- a/docs/guides/IndexRoutes.md +++ b/docs/guides/IndexRoutes.md @@ -82,4 +82,4 @@ be active since every URL starts with `/`. This is a problem because we'd like to link to `Home` but only be active if `Home` is rendered. To have a link to `/` that is only active when the `Home` route is -rendered, use `Home`. +rendered, use `Home`. \ No newline at end of file From 0c6d51cd6639aff8a84b11d89e27887b3558ed8a Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Thu, 8 Sep 2016 18:31:45 -0400 Subject: [PATCH 06/11] Adds a word to a sentence in Link documentation, cleans up whitespace. --- docs/API.md | 2 +- docs/guides/IndexRoutes.md | 2 +- modules/Link.js | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/API.md b/docs/API.md index 44322575e0..7fb751060a 100644 --- a/docs/API.md +++ b/docs/API.md @@ -113,7 +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` will be rendered. +* 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/docs/guides/IndexRoutes.md b/docs/guides/IndexRoutes.md index dc36c59984..680ee817f8 100644 --- a/docs/guides/IndexRoutes.md +++ b/docs/guides/IndexRoutes.md @@ -82,4 +82,4 @@ be active since every URL starts with `/`. This is a problem because we'd like to link to `Home` but only be active if `Home` is rendered. To have a link to `/` that is only active when the `Home` route is -rendered, use `Home`. \ No newline at end of file +rendered, use `Home`. diff --git a/modules/Link.js b/modules/Link.js index 28138514d2..1d92f814c7 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -104,8 +104,6 @@ const Link = React.createClass({ render() { const { to, query, hash, state, activeClassName, activeStyle, onlyActiveOnIndex, ...props } = this.props - - warning( !(query || hash || state), 'the `query`, `hash`, and `state` props on `` are deprecated, use `. http://tiny.cc/router-isActivedeprecated' From 996f96184494d7d0fc9ccc82543246bba23ccb7d Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Fri, 9 Sep 2016 07:30:27 -0400 Subject: [PATCH 07/11] Removes unecessary example page. --- examples/empty-links/app.js | 41 --------------------------------- examples/empty-links/index.html | 8 ------- examples/index.html | 1 - 3 files changed, 50 deletions(-) delete mode 100644 examples/empty-links/app.js delete mode 100644 examples/empty-links/index.html diff --git a/examples/empty-links/app.js b/examples/empty-links/app.js deleted file mode 100644 index bf6267b555..0000000000 --- a/examples/empty-links/app.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' -import { render } from 'react-dom' -import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router' - -import withExampleBasename from '../withExampleBasename' - -const App = ({ children }) => ( -
    -

    Link to Nowhere App

    -
      -
      • -
    • Nowhere
      • -
    • Index
      • -
    • Somewhere
      • -
    - - {children} -
    -) - -const Index = () => ( -
    -

    Welcome to the index 🚀

    -
    -) - -const Somewhere = () => ( -
    -

    Somewhere

    -

    You are now somewhere.

    -
    -) - -render(( - - - - - - -), document.getElementById('example')) diff --git a/examples/empty-links/index.html b/examples/empty-links/index.html deleted file mode 100644 index 9f5d67e5ec..0000000000 --- a/examples/empty-links/index.html +++ /dev/null @@ -1,8 +0,0 @@ - -Empty Links Example - - -

    React Router Examples / Empty Links

    -
    - - \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 5ab49b0b8f..3eef4f52c6 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,7 +15,6 @@

    React Router Examples

  • Breadcrumbs
  • Confirming Navigation
  • Dynamic Segments
    • -
  • Empty Links
  • Huge Apps (Partial App Loading)
  • Master Detail
  • Nested Animations
    • From 76f344c2fae719eb7d8ba4c2940fbe391ae5ce80 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Fri, 9 Sep 2016 07:34:39 -0400 Subject: [PATCH 08/11] Removes default "to" prop on Link component. --- modules/Link.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/Link.js b/modules/Link.js index 1d92f814c7..d52c0e0dd6 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -69,8 +69,7 @@ const Link = React.createClass({ getDefaultProps() { return { onlyActiveOnIndex: false, - style: {}, - to: '' + style: {} } }, @@ -114,7 +113,7 @@ const Link = React.createClass({ if (router) { // If user does not specify a `to` prop, return an empty anchor tag. - if (to === '') { return } + if (!to) { return } const location = createLocationDescriptor(to, { query, hash, state }) props.href = router.createHref(location) From a7933a1a74352e178d15671dceef63deeaf93439 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Fri, 9 Sep 2016 07:57:18 -0400 Subject: [PATCH 09/11] Compares "to" to null --- modules/Link.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Link.js b/modules/Link.js index d52c0e0dd6..731b0d650b 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -113,7 +113,7 @@ const Link = React.createClass({ if (router) { // If user does not specify a `to` prop, return an empty anchor tag. - if (!to) { return } + if (to == null) { return } const location = createLocationDescriptor(to, { query, hash, state }) props.href = router.createHref(location) From 9f6301d7c74aa7ee2f78fdc8eae9ca10d816bda0 Mon Sep 17 00:00:00 2001 From: Anna Rankin Date: Fri, 9 Sep 2016 09:24:59 -0400 Subject: [PATCH 10/11] Fixes typo in Link-test --- modules/__tests__/Link-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js index 5648c15ae5..aac8d3c315 100644 --- a/modules/__tests__/Link-test.js +++ b/modules/__tests__/Link-test.js @@ -476,7 +476,7 @@ describe('A ', function () { ), node, function () { const link1 = node.querySelectorAll('a')[0] const link2 = node.querySelectorAll('a')[1] - const link3 = node.querySelectorAll('a')[1] + const link3 = node.querySelectorAll('a')[2] expect(link1.href).toEqual('') expect(link2.href).toEqual('') expect(link3.href).toEqual('') From 2457975009d44583298bb4307ecda23aa3cdea1b Mon Sep 17 00:00:00 2001 From: Jimmy Jia Date: Fri, 9 Sep 2016 17:59:32 -0400 Subject: [PATCH 11/11] Whitespace nit --- modules/Link.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Link.js b/modules/Link.js index 731b0d650b..e808758e07 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -113,7 +113,7 @@ const Link = React.createClass({ if (router) { // If user does not specify a `to` prop, return an empty anchor tag. - if (to == null) { return } + if (to == null) { return } const location = createLocationDescriptor(to, { query, hash, state }) props.href = router.createHref(location)