ボタンをクリックして1つのコンポーネントを別のコンポーネントに移動するにはどうすればいいですか？

Question

ボタンをクリックして反応すると、あるコンポーネントを別のコンポーネントに移動する方法を教えてください。これができる多くの方法

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

class Abc extends React.Component { 
    handle(){ 
    alert('move to second component') 
    } 
    render(){ 
    return (<div><h1>second</h1><button onClick={this.handle}>move to second page</button></div>); 

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

    } 
} 
class Sqr extends React.Component { 
    render(){ 
    return <h1>third</h1> 
    } 
} 
ReactDOM.render(<Abc/>,document.getElementById('root')); 

Answer 1

が、私は..私が表示したいこれはJS使用する方法がわからないCDN .Iからreact-router.jsを得るあり、ここでsecond component on button click of最初component`が私のコードされます達成されるべきであり、そのすべてがそこにあります。 http://codepen.io/dirtyredz/pen/gLJeWY

class Abc extends React.Component { 
    constructor(){ 
    super(); 
    this.state={first: true}; 
    } 
    handle(){ 
    alert('move to second component') 
    this.setState({first: false}) 
    } 
    render(){ 
    return (
     <div> 
     <button onClick={this.handle.bind(this)}>move to second page</button> 
     {this.state.first == true && <Pqr/>} 
     {this.state.first == false && <Sqr/>} 
     </div> 
    ); 
    } 
} 

class Pqr extends React.Component { 
    render(){ 
    return (<div><h1>First</h1></div>) 
    } 
} 
class Sqr extends React.Component { 
    render(){ 
    return <h1>Second</h1> 
    } 
} 
ReactDOM.render(<Abc/>,document.getElementById('root')); 

これは私が以前に他の人が良いかもしれ言ったようしかし、簡単な例である：私はcodepenにこの回答aswellこの回答へalternitiveを左

：これは多くの方法の一つにすぎませんこれは期待どおりに動作します。