[changed] Preventing transition from onClick

For consistency with React v0.14, don't prevent the transition if the
onClick handler returns false.

Author: taion

UPGRADE_GUIDE.md

@@ -139,9 +139,7 @@ the link will not check if it's active.
 
 Because named routes are gone, a link to `/` with an index route at `/`
 will always be active. So we've introduced `IndexLink` that is only
-active when the index route is active.
-
-**Note:** `DefaultRoute` is gone.
+active when on exactly that path.
 
 ```js
 // v0.13.x
@@ -164,6 +162,12 @@ active when the index route is active.
 <IndexLink to="/">Home</IndexLink>
 ```
 
+#### onClick handler
+
+For consistency with React v0.14, returning `false` from a `Link`'s `onClick`
+handler no longer prevents the transition. To prevent the transition, call
+`e.preventDefault()` instead.
+
 ### RouteHandler
 
 `RouteHandler` is gone. `Router` now automatically populates

docs/API.md

@@ -103,7 +103,7 @@ The className a `<Link>` receives when its route is active. No active class by d
 The styles to apply to the link element when its route is active.
 
 ##### `onClick(e)`
-A custom handler for the click event. Works just like a handler on an `<a>` tag - calling `e.preventDefault()` or returning `false` will prevent the transition from firing, while `e.stopPropagation()` will prevent the event from bubbling.
+A custom handler for the click event. Works just like a handler on an `<a>` tag - calling `e.preventDefault()` will prevent the transition from firing, while `e.stopPropagation()` will prevent the event from bubbling.
 
 ##### *others*
 You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `className`, etc.

modules/Link.js

@@ -60,15 +60,15 @@ class Link extends Component {
   }
 
   handleClick(event) {
-    let allowTransition = true, clickResult
+    let allowTransition = true
 
     if (this.props.onClick)
-      clickResult = this.props.onClick(event)
+      this.props.onClick(event)
 
     if (isModifiedEvent(event) || !isLeftClickEvent(event))
       return
 
-    if (clickResult === false || event.defaultPrevented === true)
+    if (event.defaultPrevented === true)
       allowTransition = false
 
     // If target prop is set (e.g. to "_blank") let browser handle link.

modules/__tests__/Link-test.js

@@ -315,6 +315,36 @@ describe('A <Link>', function () {
         </Router>
       ), node, execNextStep)
     })
+
+    it('does not transition when onClick prevents default', function (done) {
+      class LinkWrapper extends Component {
+        render() {
+          return <Link to="/hello" onClick={(e) => e.preventDefault()}>Link</Link>
+        }
+      }
+
+      const history = createHistory('/')
+      const spy = spyOn(history, 'pushState').andCallThrough()
+
+      const steps = [
+        function () {
+          click(node.querySelector('a'), { button: 0 })
+        },
+        function () {
+          expect(node.innerHTML).toMatch(/Link/)
+          expect(spy).toNotHaveBeenCalled()
+        }
+      ]
+
+      const execNextStep = execSteps(steps, done)
+
+      render((
+        <Router history={history} onUpdate={execNextStep}>
+          <Route path="/" component={LinkWrapper} />
+          <Route path="/hello" component={Hello} />
+        </Router>
+      ), node, execNextStep)
+    })
   })
 
 })