[SSR] Unexpected onClick behavior on <a> tags pointing to defined routes

[gmsecrieru]

Hello Arunoda,

First of all, thanks for all the tools and development efforts, it's very much appreciated!

I came across a curious situation and it somewhat seems related to kadira:flow-router-ssr. Given a fairly simple MainNav React component, I need it to trigger an specific action when one of its links is clicked.

import React from 'react';

import { FlowRouter } from 'meteor/kadira:flow-router-ssr';

class MainNav extends React.Component {
    render() {
        return (
            <div className="navbar" role="navigation">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle visible-xs" data-toggle="collapse" data-target=".navbar-collapse">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <h1 className="logo">
                        <a href={ FlowRouter.path('index') } title="Home" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}><span className="sprite icon"></span> Rocket.<strong>Chat</strong></a>
                    </h1>
                </div>

                <nav className="navbar-collapse collapse">
                    <ul className="nav navbar-nav">
                        <li><a href="/live-demo" title="Demo" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Demo</a></li>
                        <li><a href="/features" title="Features" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Features</a></li>
                        <li><a href="/rocket-team" title="Team" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Team</a></li>
                        <li><a href={ FlowRouter.path('blog') } title="Blog" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Blog</a></li>
                        <li><a href="/releases" title="Download" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Download</a></li>
                        <li><a href="/contact" title="Contact" onClick={ (e) => { console.log('[nav] e.target is ', e.target)}}>Contact</a></li>
                    </ul>
                </nav>
            </div>
        );
    }
}

export default MainNav;

The expected behavior would be to console.log for each time a <a> tag is clicked. However, I have noticed that for each link pointing to a declared route (in this particular example, index and blog routes), the onClick handler is not always triggered (and I could not find a pattern for the times it is triggered):

I have suspected of an eventual issue on FlowRouter since. every <a> tag which does not point to a defined route has its handler fired upon every click.

Thanks for your time!

[kalubunda]

+1