Question

我正在一个名为Subscribe的组件内渲染两个组件。这两个组件是SubscribeStep1，SubscribeStep2和SubscribeStep3。这些组件由点击事件触发的状态呈现。

<TabContent activeTab={step}>
          {step === 1 ? (
            <TabPane tabId={1}>
              <SubscribeStep1
                nextStep={this.nextStep}
                updateProp={this.updateProp}
              />
            </TabPane>
          ) : (
            ''
          )}
          {step === 2 ? (
            <TabPane tabId={2}>
              <SubscribeStep2
                previousStep={this.previousStep}
                nextStep={this.nextStep}
                updateProp={this.updateProp}
              />
            </TabPane>
          ) : (
            ''
          )}
</TabContent>

我需要的是在用户访问此子组件时更改URL。这样，如果他愿意，他可以使用浏览器的导航器按钮前进和后退。

我该怎么做？

Answer 1

我建议你学习尝试 React Router

您的任务会容易得多。

您可以通过NavLiks或子组件中的history.push（'your url'）来更改URL。

<TabContent>
  <Switch>
    <Route render={()=>(
      <TabPane tabId={1}>
        <SubscribeStep1
          nextStep={this.nextStep}
          updateProp={this.updateProp}
        />
      </TabPane>
    )} />
    
    <Route render={()=>(
      <TabPane tabId={2}>
        <SubscribeStep2
          nextStep={this.nextStep}
          updateProp={this.updateProp}
        />
      </TabPane>
    )} />
 
  </Switch>
 </TabContent>

您的组件将变成这样！

将URL绑定到状态呈现的组件

1 个答案: