Как изменить URL-адрес компонента с изменением его состояния?

Question

Ну, у меня есть страница компонента электронной коммерции, которая должна изменить свое состояние после нажатия на определенные кнопки меню, а затем отобразить некоторые типы продуктов.У меня есть только один компонент для всех категорий продуктов, поэтому при изменении состояния я также хочу изменить ссылку в реакции-маршрутизаторе.Как изменить ссылку компонента с изменением состояния?

Итак, что я сделал.Сначала я добавил параметр 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, поэтому состояние могло измениться после нажатия на определенные меню.

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

Ну, и все работает, но не правильно.Когда я нажимаю на меню панели навигации, все меняется, и состояние (компонент показывает правильные типы продуктов) и ссылка, но только после того, как я дважды нажму на кнопку меню.После одного клика ничего не происходит, компонент не обновляется, а ссылка не изменяется.Но если я нажимаю на кнопку меню еще раз - все начинает работать, состояние меняется вместе с нужным URL.

Итак, как изменить отображаемую ссылку компонента вместе с его состоянием?Большое спасибо заранее, товарищеское сообщество

Answer 1

Я бы предложил использовать троичный оператор .Также, чтобы ваш код работал эффективно.

Например,

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

Это означает, что если переменная showProductType1 равна true, то она будет использовать эту ссылку.Если не верно, оно примет следующее значение showProductType2Link.