title: react-router onClick not firing
body: <p>I am trying out server side rendering with react-router and coming unstuck. No click handlers within react-router's <code>&lt;Handler /&gt;</code> fire, but lifecycle events such as <code>componentDidMount</code> do.</p>
  
  <p>The server receives a request, runs it through react-router and spits out the HTML fine:</p>
  
  <p>routes.js</p>
  
  <pre><code>var routes = (
      &lt;Route handler={App}&gt;
          &lt;Route name='page' handler={Page} path='/page' /&gt;
          &lt;Route name='other' handler={Other} path='/other' /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>var App = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  &lt;RouteHandler /&gt;
              &lt;/div&gt;
          )
      }
  });
  </code></pre>
  
  <p>index.jade</p>
  
  <pre><code>extends layout
  block content
    div#app!= markup
    div#test!= test
  </code></pre>
  
  <p>You can see there are 2 <code>React</code> components here; <code>content</code> (the resulting view from react-router) and <code>test</code> (simple button with onClick)</p>
  
  <p>Once the HTML is loaded on the client, my <code>client.js</code> script runs which enables <code>React</code> to check and bind to the components:</p>
  
  <pre><code>function run(){
      Router.run(routes, Router.HistoryLocation, function (Handler, state) {
          React.render(&lt;Handler /&gt;, document.getElementById('app'));
          React.render(&lt;Test /&gt;, document.getElementById('test'));
      });
  }
  run();
  </code></pre>
  
  <p>The issue is that <strong>none</strong> of the <code>onClick</code> handlers run for <strong>any</strong> components inside of <code>&lt;Handler /&gt;</code>, including the <code>react-router</code> component <code>&lt;Link /&gt;</code>. However <code>&lt;Test /&gt;</code> <strong>does</strong> fire perfectly fine.</p>
  
  <p>Here is the markup for one of the pages which would be inside <code>&lt;Handler /&gt;</code>:</p>
  
  <pre><code>var Page = React.createClass({
      componentDidMount:function(){
        window.setTimeout(function(){
            //The runs fine
            console.log('component has connect properly');
        },500);
      },
      render: function () {
          return (
              &lt;div&gt;
                  &lt;h1 onClick={this.test}&gt;Page&lt;/h1&gt;
                  &lt;Link to='other' &gt;Other&lt;/Link&gt;
                  &lt;button onClick={this.alertIt}&gt;Alert&lt;/button&gt;
              &lt;/div&gt;
          )
      },
      test:function(){
          console.log('testing');
      },
      alertIt: function () {        
          alert('Page');
      }
  });
  </code></pre>
  
  <p>And here is the working <code>&lt;Test /&gt;</code> component:</p>
  
  <pre><code>var Test = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  &lt;button onClick={this.test}&gt;Test&lt;/button&gt;
              &lt;/div&gt;
          )
      },
      test:function(){
          alert('testing');
      }
  });
  </code></pre>
  
  <p><strong>Update 1</strong></p>
  
  <p>Even if I remove the server side rendering and render the <code>&lt;Handler /&gt;</code> just on the client the issue still persists.</p>
  
  <p><strong>Updated 2</strong></p>
  
  <p>The page example above is rendering within a parent component:</p>
  
  <pre><code>var App = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  &lt;RouteHandler /&gt;
              &lt;/div&gt;
          )
      }
  });
  </code></pre>
  
  <p><strong>Updated 3</strong></p>
  
  <p>I copied this <strong>without</strong> using <code>Browserify</code>, having <code>React</code> and <code>react-router</code> as global objects and it works perfectly fine...</p>
  
  <p><strong>Solution A</strong></p>
  
  <p>By adding <code>browserify-shim</code> to my build process and setting it to use <code>React</code> and <code>react-router</code> from the <code>window</code> instead of <code>node_modules</code> it works. This is not the cleanest solution but still fits the isomorphic stuff nicely. I would still like to find out why using <code>React</code> from <code>node_modules</code> causes this issue though.</p>
  
  <p>browserify-shim config:</p>
  
  <pre><code>"browserify": {
      "transform":[
        "browserify-shim"
      ]
    },
    "browserify-shim": {
      "React": "global:React",
      "react-router": "global:ReactRouter"
    }
  </code></pre>
  
  <p><strong>Update 4</strong></p>
  
  <p>After some playing around it seems it's only <code>react-router</code> which isn't playing nicely with <code>Browserify</code>. Simple <code>React</code> and <code>Browserify</code> works fine. </p>