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

Question

我有一个表单组件，我正在单击下一步按钮对该表单进行验证，一旦验证成功，我想呈现一个不同的组件。

在状态中，我将“showComponent”保持为假，单击该按钮时，我将其设为真。

_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>

我能够渲染那个新页面，但它在同一页面上渲染，这是我不想要的。

Answer 1

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

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

我还快速创建了一个demo in CodeSandbox，它与您正在寻找的内容更相似。