React router v4 с redux, не в состоянии перерисовать компонент - PullRequest
Новая
       27

React router v4 с redux, не в состоянии перерисовать компонент

0 голосов
/ 23 октября 2018

У меня возникают проблемы с рендерингом компонентов при перемещении нового местоположения.

с использованием следующих версий: 

"react": "^16.5.2",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0"

Base.js 

<div >
    <Header />
    <div id="contentwrapper">
        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/service/details/:id' render={(props) => (
                            <ServiceDetails key={props.match.params.id} {...props} />)
                        } />
            </Switch>
        </BrowserRouter>
    </div>
    <Footer id="footer" />
</div>

Как я перемещаю местоположение:

Местоположение выталкивается из компонента <Header>, где connect обернутwithRouter из react-router-dom: (export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));) 

var route = "/service/details/" + value        
this.props.history.push(route)

Дочерний компонент (ServiceDetails.js) 

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import _ from 'lodash';

import { getServiceDetailsAction } from '../actions/ServiceActions';
import { getServiceDetails } from '../requests/ServiceAxios';

class ServiceDetails extends React.Component {

    // constructor

    componentWillReceiveProps(newProps) {
       debugger;
    }
    render() {
        return (
            <div>
                Service details: {this.props.location.pathname.substring(this.props.location.pathname.lastIndexOf('/') + 1)}
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        serviceStore: state.ServiceReducer
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        getServiceDetailsAction: getServiceDetailsAction
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ServiceDetails);

Ссылка корректно обновляется вПанель URL браузера, но компонент не отображается.Также componentWillReceiveProps дочернего компонента вызывается только один раз, когда загружается все приложение.

Текущее поведение:

  • this.props.history.push ("/ service / details / 5")
  • рендеринг страницы Service details: 5
  • this.props.history.push ("/ service / details / 262")
  • страница по-прежнему показывает Service details: 5

Что я делаю не так?

1 Ответ

0 голосов
/ 23 октября 2018

Ваш компонент заголовка находится вне компонента поставщика маршрутизатора. Оберните свой заголовок в компоненте BrowserRouter 

<BrowserRouter>
    <div >
        <Header />
        <div id="contentwrapper">
           <Switch>
               <Route exact path='/' component={Home} />
               <Route path='/service/details/:id' render={(props) => (
                                <ServiceDetails key={props.match.params.id} {...props} />)
                            } />
           </Switch>
        </div>
        <Footer id="footer" />
    </div>

</BrowserRouter>
...