How to use Link to wrap div in react?

Question

<Link to="/promospace/detail">
    <div className="card">
        /* content */
    </div>
</Link>

I can't do above, no error but it just doesn't work. Any clue how to wrap div within Link? Or I have to bind it to a click handler? Can't use Link in jsx?

Answer 1

Use a span inside your link, and set display: block on it as well, that will definitely work everywhere, and it will validate!

<Link to="/promospace/detail">
    <span className="card" style={{"display": "block"}}>
        /* content */
    </span>
</Link>

Or else you can do dynamic routing on an onClick event

changeRoute = () => {
    this.context.router.push('/promospace/detail');
}
......
<div className="card" onClick={this.changeRoute}>
        /* content */
</div>

....
MyComponent.contextTypes = {
     router: React.PropTypes.func.isRequired
}