Javascript 如何在react中单击按钮时将一个组件移动到另一个组件？

您能告诉我如何在react中单击按钮将一个组件移动到另一个组件吗？ 我从cdn获得了

react router.js

。我不知道如何使用这个js。我想在单击

first component`按钮时显示
第二个组件，这是我的代码


Abc类扩展了React.Component{
句柄（）{
警报（'移动到第二个组件'）
}
渲染（）{
返回（第二次移动到第二页）；
}
}
类Pqr扩展了React.Component{
渲染（）{
返回（第二次单击）
}
}
类Sqr扩展了React.Component{
渲染（）{
第三名
}
}
ReactDOM.render（，document.getElementById（'root'））；
有很多方法可以实现这一点，所有这些方法都有其独特之处。这只是众多方法之一：

我在密码笔上留下了这个答案的备选答案：

Abc类扩展了React.Component{
构造函数（）{
超级（）；
this.state={first:true}；
}
句柄（）{
警报（'移动到第二个组件'）
this.setState（{first:false}）
}
渲染（）{
返回(
移到第二页
{this.state.first==true&&}
{this.state.first==false&&}
);
}
}
类Pqr扩展了React.Component{
渲染（）{
返回（第一个）
}
}
类Sqr扩展了React.Component{
渲染（）{
返回秒
}
}
ReactDOM.render（，document.getElementById（'root'））；

这是一个快速的例子，正如我前面所说的，其他人可能会更好，但这正如预期的那样有效。
当你说“移动”时，你的意思是“显示”吗？是使用路由器JS显示第二个组件不确定你是否理解React router的用例。React Router用于在更改url时显示不同的组件层次结构。如果您没有更改路由（url），那么您就不应该使用React路由器。我想使用RouteHandler
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')); 

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