ddimonn8080
@ddimonn8080

Почему после history.push() не рендерится компонент?

В компоненте
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'));

В чем проблема?
Спасибо
  • Вопрос задан
  • 1321 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы