react.jsでリンクが動作しないのはなぜですか？

Question

私はreact-routerとLink toの機能を使用しています。私は、ボタンのクリックでsecond componentを表示したいが、私のコードは、最初のコンポーネント内のボタンがあり

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')); 

が機能していません。私はボタンをクリックして2番目のコンポーネントを表示したい。

Answer 1

それが働いている場合

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

チェックをレンダリングする第一の成分の中で{this.props.children}を宣言します。

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'));