Meteor Router.go() doesn't rederect, but it works in Chrome's console

Question

Meteor Router.go() doesn't work. It just flash a new url for few milliseconds in the browser, and the page didn't switch.

Sorry I can't find any clue how this wired thing happen..!

Template.Post.events({ 
'click a': function() { 
    Router.go('mainPage');  
});

Router.route('/', {
  name: 'mainPage',
  template: 'mainPage'
});

Update: I input Router.go('mainPage'); in Chrome console. It works and return undefined.

Answer 1

To avoid this miserable, horrible experience for everyone, let me post my solution and answer myself:

When Router.go() redirects the URL, the URL also instantly redirects to href="#" or href="". Thus, it disables the redirection from Router.go().

The way to solve it is just to NOT put href="" in the <a> tag. Also, you can add this css:

a:hover {
    cursor: pointer;
}

to show that the tag is actually clickable.

Answer 2

You can avoid having to remove the href by calling event.preventDefault() which stops the execution of any additional bubbled events like the href click:

"click #aLinkId": function(event, template) {
    event.preventDefault();
    Router.go('/newLocation');
}