如何在React中单击下一个按钮显示新组件

Posted 2021-04-16

我有一个表单组件，我正在点击Next按钮验证该表单，一旦验证成功，我想渲染一个不同的组件。

在状态内我将“showComponent”保持为false并且在单击该按钮时我将其设为true。

_onButtonClick (event){
    event.preventDefault();
    this.setState({
        ...this.state,
        showComponent:  !this.state.showComponent
    })
    console.log("button clicked",this.state);
  }

按钮逻辑：

<div>
    <button onClick={(event) => this._onButtonClick(event)}>Button</button>
         {this.state.showComponent ?<AddModules /> : null}
</div>

我能够渲染新页面，但它在同一页面上呈现，我不想要。

答案

我认为<Route />给你的react-router-dom组件正是你所需要的。

看看example in the react-router docs。注意他们如何设置他们的<Route />。他们还有一个关于如何防止某人进入另一页的example in the docs。

我也做了一个快速的demo in CodeSandbox，更接近你正在寻找的东西。