Reimplement remix-run#3803 in v4

sanniassin · Jun 22, 2017 · f855b4c · f855b4c
1 parent 6648a2f
commit f855b4c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git 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'
 
 <Link to="/about">About</Link>
+<Link>Disabled</Link> // renders <a> without a href attribute
 ```
 
 ## to: string

diff --git 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, ...props } = this.props // eslint-disable-line no-unused-vars
 
+    if (to == null) {
+      return <a {...props} href={null} />
+    }
+
     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
@@ -24,6 +24,50 @@ describe('A <Link>', () => {
 
     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((
+        <MemoryRouter>
+          <Link>link</Link>
+        </MemoryRouter>
+      ), node)
+
+      const href = node.querySelector('a').getAttribute('href')
+
+      expect(href).toEqual(null)
+    })
+
+    it('omits href prop', () => {
+      const node = document.createElement('div')
+
+      ReactDOM.render((
+        <MemoryRouter>
+          <Link href="/path">link</Link>
+        </MemoryRouter>
+      ), node)
+
+      const href = node.querySelector('a').getAttribute('href')
+
+      expect(href).toEqual(null)
+    })
+
+    it('passes down other props', () => {
+      const node = document.createElement('div')
+
+      ReactDOM.render((
+        <MemoryRouter>
+          <Link className="link-class">link</Link>
+        </MemoryRouter>
+      ), node)
+
+      const className = node.querySelector('a').getAttribute('class')
+
+      expect(className).toEqual('link-class')
+    })
+  })
 })
 
 describe('When a <Link> is clicked', () => {