为什么Link to在react.js中不起作用？

Question

I am using react-router and Link to function. I want to show second component on button click but my code is not working

http://codepen.io/anon/pen/GNadKZ?editors=1010

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 (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link></div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}

ReactDOM.render((<Router>
    <Route path="/" component={Abc}>
      <Route path="about" component={Pqr}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>),document.getElementById('root'));

There is a button in the first component. I want to show second component on button click.

Answer 1

Declare {this.props.children} in first component's render

 return (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link> {this.props.children} </div>);

check if it's working:

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 (){
     console.log('inside first render');
     return (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link>{this.props.children}</div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}

ReactDOM.render((<Router>
    <Route path="/" component={Abc}>
      <Route path="about" component={Pqr}/>  
      <Route path="*" component={NoMatch}/>
     </Route>   
  </Router>),document.getElementById('root'));