ReactJs：如何不使用Routes返回上一页？

如何解决ReactJs：如何不使用Routes返回上一页？

每个按钮由一个不同的React组件表示，因此我在 AdminHomeView 中有3个React组件：

export default class AdminHomeView extends Component {
  constructor(props) {
    super(props);
    this.handlePartnerAreaClick = this.handlePartnerAreaClick.bind(this);
    this.handleCampaignAreaClick = this.handleCampaignAreaClick.bind(this);
    this.handleImportAreaClick = this.handleImportAreaClick.bind(this);
    this.state = {
      partnerAreaVisible: false,campaignAreaVisible: false,importAreaVisible: false,};
  }

  handlePartnerAreaClick() {
    this.setState({
      partnerAreaVisible: true,});
  }

  handleCampaignAreaClick() {
    this.setState({
      partnerAreaVisible: false,campaignAreaVisible: true,});
  }

  handleImportAreaClick() {
    this.setState({
      partnerAreaVisible: false,importAreaVisible: true,});
  }

  render() {
    return (
      <div>
        <OptionsMenu
          showPartnerArea={this.handlePartnerAreaClick}
          showCampaignArea={this.handleCampaignAreaClick}
          showImportArea={this.handleImportAreaClick}
        />
        {this.state.partnerAreaVisible ? <PartnersView /> : null}
        {this.state.campaignAreaVisible ? <CampaignsView /> : null}
        {this.state.importAreaVisible ? <ImportView /> : null}
      </div>
    );
  }
}

当我单击“ Partners”按钮时，React呈现 PartnersView 组件，这是页面的外观：（有一个以前创建的所有合作伙伴的列表，由 ListPartners 组件表示，还有一个按钮，显示用于注册新合作伙伴的表单。）

这是 PartnersView 组件的代码：

export default class PartnersView extends Component {
  constructor(props) {
    super(props);

    this.handleCreatePartnerClick = this.handleCreatePartnerClick.bind(this);

    this.state = {
      listPartnersVisible: true,formPartnerVisible: false,partners: [],};
  }

  componentDidMount() { ... }

  handleCreatePartnerClick() {
    this.setState({
      listPartnersVisible: false,formPartnerVisible: true,});
  }

  render() {
    return (
      {this.state.listPartnersVisible ? (
        <div id="list-container">
          <ListPartners partners={this.state.partners} />

          <div className="button-wrapper">
            <button onClick={this.handleCreatePartnerClick} >
              Register new partner
            </button>
          </div>
       </div>
      ) : null}

      {this.state.formPartnerVisible ? (
        <FormPartner />
      ) : null}
    );
  }
}

最后，当我单击“注册新伙伴”按钮时，页面如下所示：

但是，当我再次单击TOP菜单上的“合作伙伴”按钮时，我需要返回合作伙伴列表，但是现在，当我单击此按钮时什么也没有发生（因为React可以理解用户仍然在PartnerArea中（第一个代码）。

有人知道我可以回到合作伙伴列表吗？

谢谢。

解决方法

我建议使用Fully Uncontrolled Component with a Key模式。

为了在移动到另一个项目时重置值...，我们可以使用特殊的React属性称为key。当key发生变化时，React将create a new component instance rather than update the current one。

您可以在PartnersView的{{1}}组件上使用React键来重置组件。

由于您只想重置视图，因此密钥不需要特殊，我怀疑将其设为随机数就足够了（只需与最后一个密钥不同）

AdminHomeView

但是，如果您对此感到担忧，则可以始终使用uuid之类的东西来生成真正唯一的密钥。

<PartnersView key={Math.random()} />

在代码中

import { v4 as uuidv4 } from 'uuid';

...

<PartnersView key={uuidv4()} />

现在您是formpartner。添加formpartner之后，如果将标志“ formPartnerVisible”更改为false，并将listPartnersVisible更改为true。它将解决问题。