title: Why is Link to not working in react.js?
body: <p>I am using <code>react-router</code> and <code>Link to</code> function. I want to show <code>second component</code> on button click  but my code is not working</p>
  
  <p><a href="http://codepen.io/anon/pen/GNadKZ?editors=1010" rel="nofollow noreferrer">http://codepen.io/anon/pen/GNadKZ?editors=1010</a></p>
  
  <pre><code>var Router = ReactRouter;
  
  var DefaultRoute = Router.DefaultRoute;
  var Link = Router.Link;
  var Route = Router.Route;
  var RouteHandler = Router.RouteHandler;
  
  class Abc extends React.Component {
    handle(){
      alert('move to second component')
    }
     render (){
       return (&lt;div&gt;&lt;h1&gt;second&lt;/h1&gt;&lt;Link to="about"&gt;&lt;button onClick={this.handle}&gt;move to second page&lt;/button&gt;&lt;/Link&gt;&lt;/div&gt;);
  
     }
  }
  class Pqr extends React.Component {
     render (){
       return (&lt;div&gt;&lt;h1&gt;second&lt;/h1&gt;&lt;button&gt;click&lt;/button&gt;&lt;/div&gt;)
  
     }
  }
  
  ReactDOM.render((&lt;Router&gt;
      &lt;Route path="/" component={Abc}&gt;
        &lt;Route path="about" component={Pqr}/&gt;
        &lt;/Route&gt;
        &lt;Route path="*" component={NoMatch}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;),document.getElementById('root'));
  </code></pre>
  
  <p>There is a button in the first component. I want to show second component on button click.</p>