Click not handled after you return to a page about react-mini-router

[larrymyers]

Can you get me some more details so I can reproduce?

1. Are you navigating to a url not handled by the router?
2. Is the componentWillUnmount lifecycle method not being called on the component you're adding the RouterMixin to?

If the DOM tree isn't changing, then the event listener shouldn't be lost.

[poshaughnessy]

Ah, that's good to know - perhaps I'm inadvertently doing something a bit strange then!

Let me see if I can reduce it down to a test case that I can share, then. I'll post an update here soon.

[larrymyers]

Any updates on what the issue was?

[poshaughnessy]

Sorry for the delay, Larry. Just trying to build a little test case now. Hope to post it here tonight or tomorrow.

[poshaughnessy]

OK, here is a quick test case: https://github.com/poshaughnessy/react-mini-router-test

NB. I used a standalone version of your library, that I made using browserify on the command line, because:

• I didn't want to introduce a CommonJS compile step, for this simple test case
• I tried installing it with bower, but it errored with: ENOTFOUND Package juliangruber/isarray=juliangruber/isarray not found?

Instructions / steps to reproduce the problem (also included in the README):

• npm install
• node server
• Fire up localhost:3000 in the browser
• (Bring up the Network tab in the debugging tools so you can see when a full page request is made)
• Click Page one - this will load without a full page request
• Click Page two - this now causes a full page request

Tested in Chrome v40 and Firefox v35.

Hope this helps!

[larrymyers]

@poshaughnessy Thanks! That will be extremely helpful in debugging. I've attached this issue to the 1.1 milestone, so expect to see it resolved this month.

[holyjak]

There is actually a very simple workaround, at least for us it worked well - wrap the component produced by the route function (that is different for each route) into a <div> - which will get the listener attached to itself, does not change, and thus doesn't lose the listeners.
I.e. instead of

render: function() {
        return this.renderCurrentRoute();
    },

do this

render: function() {
        return (<div>{this.renderCurrentRoute()}</div>);
    },

in your root component with the RouterMixin.

[rapind]

I ran into this issue today. @jakubholynet 's solution worked.

Still running into this, @jakubholynet's solution helped me out! Thank you. @larrymyers it'd be awesome if this was noted on the README if the code fix is a little ways off!