React router v4 with redux not able to re-render component

Question

I am having a difficulties with rendering the components when the new location is being pushed.

using these versions:

"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>

How I am pushing the location:

The location is being pushed from <Header> component where the connect is wrapped with withRouter from react-router-dom: (export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));)

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

Child component (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);

The link is updated correctly in the url bar of browser but the component is not rendered. Also the componentWillReceiveProps of the child component is called only once when the whole app is loading.

Current behavior:

this.props.history.push("/service/details/5")
page renders Service details: 5
this.props.history.push("/service/details/262")
page still shows Service details: 5

What am I doing wrong?

Possible duplicate of [Component does not remount when route parameters change](https://stackoverflow.com/questions/32261441/component-does-not-remount-when-route-parameters-change) — Igor Alemasow, Oct 23 '18 at 08:50

score 1 · Accepted Answer · answered Oct 23 '18 at 09:08

Your Header Component is out of the Router Provider Component, Wrap your Header within the BrowserRouter component

<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>

React router v4 with redux not able to re-render component

1 Answers1