Reactive router onClick not working

I'm trying to do server side rendering with responsive router and come off. There are no click handlers in the fire-fireter <Handler />

, but lifecycle events like componentDidMount

do.

The server receives the request, runs it through the agent router, and calculates the HTML code:

routes.js

var routes = (
    <Route handler={App}>
        <Route name='page' handler={Page} path='/page' />
        <Route name='other' handler={Other} path='/other' />
    </Route>
);

      

        
        
        
      

    

server.js

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

      

        
        
        
      

    

index.jade

extends layout
block content
  div#app!= markup
  div#test!= test

      

        
        
        
      

    

Here you can see 2 React

; content

(resulting view from reactive router) and test

(simple button with onClick)

Once the HTML is loaded on the client, my client.js

script is run , which allows the React

components to be validated and bind:

function run(){
    Router.run(routes, Router.HistoryLocation, function (Handler, state) {
        React.render(<Handler />, document.getElementById('app'));
        React.render(<Test />, document.getElementById('test'));
    });
}
run();

      

        
        
        
      

    

The problem is that none of the handlers onClick

is executed for any components inside <Handler />

, including the component react-router

<Link />

. However, fire <Test />

does great.

Here's the markup for one of the pages inside <Handler />

:

var Page = React.createClass({
    componentDidMount:function(){
      window.setTimeout(function(){
          //The runs fine
          console.log('component has connect properly');
      },500);
    },
    render: function () {
        return (
            <div>
                <h1 onClick={this.test}>Page</h1>
                <Link to='other' >Other</Link>
                <button onClick={this.alertIt}>Alert</button>
            </div>
        )
    },
    test:function(){
        console.log('testing');
    },
    alertIt: function () {        
        alert('Page');
    }
});

      

        
        
        
      

    

And here is the working component <Test />

:

var Test = React.createClass({
    render: function () {
        return (
            <div>
                <button onClick={this.test}>Test</button>
            </div>
        )
    },
    test:function(){
        alert('testing');
    }
});

      

        
        
        
      

    

Update 1

Even if I remove the server side rendering and <Handler />

only show it on the client, the problem still persists.

Updated 2

The example page above is rendering inside a parent component:

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

      

        
        
        
      

    

Updated 3

I copied this one without using Browserify

, having React

and react-router

as globals and it works great ...

Solution A

By adding browserify-shim

to my build process and setting it to use React

and react-router

from window

instead node_modules

, it works. This is not the cleanest solution, but works great for isomorphic material. I would still like to know why using React

from node_modules

is causing this problem.

Browsify-shim config:

"browserify": {
    "transform":[
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "React": "global:React",
    "react-router": "global:ReactRouter"
  }

      

        
        
        
      

    

Update 4

After some games around it seems just react-router

that does not play perfectly with Browserify

. Simple React

and Browserify

works great.