Introduction

To cope with industrial standard that href hint shown to user on hover anchor and flow control, we better create our own <Link/>

Reference

// ./app/components/Link.js for small application
// ./app/shared/components/Link.js for Scene-based categorisation

import { Link } from 'react-router';

const EnhancedLink = (props) => (
    <Link {...props} onClick={(e) => {
        e.preventDefault();
        props.onClick();
    }}/>
)

export default EnhancedLink;

import { Link } from './shared/components/Link';
// import { Link } from 'react-router';
import { showTravelTo } from '../actions';
import { bindActionCreators as bind } from 'redux';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';


const Presenter = ({code, showTravelTo, image, t}) => (
    <Link to=`/travel-to/${t(code)}` onClick={() => showTravelTo({code})}>
        <div>
            <img src={image} />
        </div>
    </Link>
)

const Translated = translate(['namespace'], {wait: true})(Presenter)

const mapDispatchToProps = (dispatch, props) => {
    showTravelTo: bind(showTravelTo, dispatch)
}

const Connected = connect(mapDispatchToProps)(Translated)

export default Connected;