В компоненте
ProductSingle.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import ProductPrices from './ProductPrices';
import ReactHtmlParser from 'react-html-parser';
import history from '../../helpers/history';
class ProductSingle 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;
при клике на
<span
className="good__itemDescrTitle"
onClick={this.postSelectedHandler}
>
{ReactHtmlParser(descrtitle)}
</span>
происходит push, url меняется но компонент не рендерится.Но если перезагрузить страницу то рендер срабатывает.
Main.js
import React, {Component} from 'react';
import Footer from './components/footer/Footer';
import Header from './components/header/Header';
import Ancorup from './components/Ancorup';
import { Route, Switch } from 'react-router-dom';
import HomePage from './components/pages/HomePage';
import AboutPage from './components/pages/AboutPage';
import ShopPage from './containers/pages/ShopPage';
import VideotipPage from './components/pages/VideotipPage';
import StockPage from './components/pages/StockPage';
import DoyouknowPage from './components/pages/DoyouknowPage';
import ContactsPage from './components/pages/ContactsPage';
import ErrorPage from './components/pages/ErrorPage';
import ShippingPage from './components/pages/ShippingPage';
import TermsCooperationPage from './components/pages/TermsCooperationPage';
import ProductSinglePage from './components/pages/ProductSinglePage';
class Main extends Component {
render() {
return (
<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} />
<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'));
В чем проблема?
Спасибо
Простой
Сложный
