Why, after history.push() not being rendered in the component?

In the component
ProductSingle.js

import React {Component} from 'react';
import {Link} from 'react-router-dom';
ProductPrices import from './ProductPrices';
import ReactHtmlParser from 'react-html-parser';
import history from '../../helpers/history';

ProductSingle class extends Component {

constructor(props){
super(props);

 this.postSelectedHandler = this.postSelectedHandler.bind(this, this.props.id this.props.title);
}

 postSelectedHandler(id, title, e){
 history.push({pathname: '/shop/some-product', id: id });
}

render(){

 const {image, title, excerpt, descrtitle, descrtext, regular_price, sale_price, discount, currency, id, matchPath} = this.props;

 return (
 <div className="good__item">
 <div className="good__itemInner">
 <div className="good__itemContent">
 <div className="good__itemHeader">
 <img className="good__itemImage" src={image} data-id={id} alt=""/>
</div>

 <div className="good__itemTitle">{ReactHtmlParser(title)}</div>

 <div className="good__itemExcerpt">{ReactHtmlParser(excerpt)}</div>

 <div className="good__itemDescr">
<span
className="good__itemDescrTitle"
onClick={this.postSelectedHandler}
>
{ReactHtmlParser(descrtitle)}
</span>
{ReactHtmlParser(descrtext)}
</Link>
</div>

 <ProductPrices regular_price={regular_price} sale_price={sale_price} currency={currency} />
</div>
</div>
</div>
);
}
}

export default ProductSingle;

when you click on
<span
className="good__itemDescrTitle"
onClick={this.postSelectedHandler}
>
{ReactHtmlParser(descrtitle)}
</span>

occurs push, the url changes but the component is not rendered.But if you reload the page then the render works.
Main.js

import React {Component} from 'react';

import the Footer from './components/footer/Footer';
import the Header from './components/header/Header';
Ancorup import from './components/Ancorup';

import { Route, Switch } from 'react-router-dom';
import HomePage from './components/pages/HomePage';
import aboutpage patrolled from './components/pages/aboutpage patrolled';
ShopPage import from './containers/pages/ShopPage';
VideotipPage import from './components/pages/VideotipPage';
StockPage import from './components/pages/StockPage';
DoyouknowPage import from './components/pages/DoyouknowPage';
ContactsPage import from './components/pages/ContactsPage';
import ErrorPage from './components/pages/ErrorPage';
ShippingPage import from './components/pages/ShippingPage';
TermsCooperationPage import from './components/pages/TermsCooperationPage';
ProductSinglePage import from './components/pages/ProductSinglePage';

class Main extends Component {
 render() {
 return (
the <div>
 <div className="content__main test">
<Header/>
 <div id="main" className="site__main">
<Switch>
 <Route exact path="/" component={HomePage} />
 <Route exact path="/about-cosmetics" component={aboutpage patrolled} />
 <Route exact path="/shop" component={ShopPage} />
 <Route exact path={`/shop/:productId`} component={ProductSinglePage} />
 <Route exact path="/videotip" component={VideotipPage} />
 <Route exact path="/stock" component={StockPage }/>
 <Route exact path="/doyouknow" component={DoyouknowPage} />
 <Route exact path="/contacts" component={ContactsPage} />
 <Route exact path="/shipping" component={ShippingPage} />
 <Route exact path="/terms-cooperation" component={TermsCooperationPage} />
 <Route component={ErrorPage} />
</Switch>
</div>
</div>
<Footer/>
<Ancorup/>
</div>
);
}
}
export default Main;

helpers/history.js

import {createBrowserHistory} from 'history';

export default createBrowserHistory();

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import history from './helpers/history';

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render((
 <Provider store={store}>
 <Router history={history}>
 <Main />
</Router>
</Provider>
), document.getElementById('root'));

What's the problem?
Thank you
March 19th 20 at 09:08
0 answer

Find more questions by tags React