如何在react中呈现同一页面上的组件

在我设计的页面顶部,你可以看到图片作为链接。 当您单击不同的图片时,会调用不同的组件。 例如,onClick方法显示设置为true的组件:

    state = {
        showPage1: true,
        showPage2: false,
        showPage3: false,
        showPage4: false
      };
      onClick1 = e =>
      this.setState({ showPage1 : true, showPage2: false, showPage3: false, showPage4: false
      });
      //continue with another onClick methods

最终渲染方法为:

render (){
    const src = '/images/image.jpg'
    return(
      <div>
      <Image.Group size='tiny'>
      <Image src={src} onClick={this.onClick1}/>
      </Image.Group>
      { this.renderPage() }
      </div>
    )
  }

基于此,不同的组件显示在同一页上。

 renderPage() {
    const showPage1 = this.state.showPage1;
    if (showPage1) {
      return (
          <Page1 submit={this.submit}/>
      );}

现在,每个组件对我来说都是一个表单,用户在其中提交详细信息。 当提交详细信息时,我不知道如何重定向到另一个组件。 例如,如果是 Page1 ,然后我想自动重定向到 Page2 等等 这就是我现在拥有的,但这当然不起作用。 如果这个组件没有链接,我不知道如何一个接一个地调用这个组件,因为它显示在同一个页面上。

submit = data =>
     this.props.saveComponent(data).then(() => this.props.history.push('/text'));

提前谢谢!