Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions UPGRADE_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions modules/Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
30 changes: 30 additions & 0 deletions modules/__tests__/Link-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})

})