如何通过更改组件的状态来更改组件的 URL？答案

【问题标题】：How to change the URL of a component with a changing of its state?如何通过更改组件的状态来更改组件的 URL？
【发布时间】：2019-06-28 05:18:49
【问题描述】：

嗯，我有一个电子商务组件页面，它必须在单击某些特定菜单按钮后更改其状态，然后呈现一些产品类型。对于所有产品类别，我只有一个组件，因此在更改状态时，我还想更改 react-router 中的链接。如何通过改变状态来改变组件的链接？

那么，我做了什么。首先，我在 state 中添加了 url 参数：

state = {
productType1: false,
productType2: false,
link: ' '
}

这里是改变主要组件状态的函数。在这里，我也有一个需要值的 url。

showProductType1= () => {
this.setState(() => {
  return {
    productType1: true,
    productType2: false,
    link: '/product_type1',
  }
})
}

showProductType2= () => {
this.setState(() => {
  return {
    productType2: true,
    productType1: false,
    link: '/product_type2',
  }
})
}

然后我将所有这些作为道具传递给主组件，它负责显示不同的产品类型。

<Route exact path={this.state.link} render={(props) => 
 <ProductList {...props} 
 productType1={this.state.productType1} 
 productType2={this.state.productType2}/>
 }>
</Route>

功能转到导航栏组件，因此在单击特定菜单后状态可能会发生变化。

<Navbar 
showProductType1 = {this.showProductType1} 
showProductType2 = {this.showProductType2} 
link={this.state.link}/>

嗯，一切正常，但不正常。当我点击导航栏菜单时，一切都在改变，状态（组件显示正确的产品类型）和链接，但只有在我点击菜单按钮两次之后。只需单击一下，什么都没有发生，组件不会更新，链接也不会改变。但是，如果我再次单击菜单按钮 - 一切都开始工作，状态将与所需的 URL 一起发生变化。

那么，如何改变组件的显示链接及其状态呢？非常感谢，社区同胞

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我建议使用ternary operator。还可以保持您的代码高效。

例如

var link = this.state.showProductType1 ? this.state.showProductType1Link : this.state.showProductType2Link

这意味着如果showProductType1 的变量为真，那么它将使用该链接。如果不为真，则下一个值为showProductType2Link。

【讨论】：