Есть страница-компонент интернет-магазина, которая по клику на определенные пункты меню отображает определенные категории товаров. Компонент для отображения разных категорий всего один, то есть и url в react-router у него один. Как сделать так, чтобы при изменении состояния этого компонента менялся и отображаемый url?
Я сделал так. Указал в 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 компонента действительно изменяется, но только если кликнуть на пункт меню два раза. После первого клика ничего не происходит, компонент не обновляется, следовательно никаких изменений. После второго клика уже обновляется и компонент, и отображаемая ссылка, и все рендерится корректно.
Как грамотно изменить url компонента в зависимости от смены состояния?
