Why is Link to not working in react.js?
<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>