React router receives match params but does not update the component - reactjs

Question

I'm using react-boilerplate for my project. When changing the router param, the component does not rerender. The router looks like this.
<switch>
<route exact path="/" render={()><homepage {...this.props}/> } />
<route exact path="/practice-areas" component={PracticeAreasLandingPage}/>
<route path="/practice-areas/:practiceAreasItem" component={PracticeAreas}/>} />
<route component={ notfoundpage } />
</switch>
The component looks like this.
class PracticeArea extends PureComponent {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.onInit();
}
render() {
const pa = this.props.practiceArea;
const randPas = this.props.randPracticeAreas;
....
export function mapDispatchToProps(dispatch) {
return {
onInit: () => {
dispatch(loadPracticeArea());
dispatch(loadRandomPracticeAreas());
}
};
}
const mapStateToProps = createStructuredSelector({
practiceArea: makeSelectPracticeArea(),
loading: makeSelectLoading(),
error: makeSelectError(),
randPracticeAreas: makeSelectRandomPracticeAreas(),
randLoading: makeSelectRandomLoading(),
randError: makeSelectRandomError(),
});
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
const withReducer = injectReducer({
key: 'practiceArea',
reducer
});
const withSaga = injectSaga({
key: 'practiceArea',
saga
});
export default compose(
withReducer,
withSaga,
withConnect,
)(PracticeArea);
When clicking on a Link that has a route like '/practice-areas/some-route', the component does not update.

Answer 1

Try moving the PracticeAreas Route before the PracticeAreasLandingPage Route
<Switch>
<Route exact path="/" render={()><homepage {...this.props}/> } />
<Route path="/practice-areas/:practiceAreasItem" component={PracticeArea} />
<Route path="/practice-areas" component={PracticeAreasLandingPage}/>
<Route component={ NotFoundPage } />
</Switch>
Order of Routes is important in a Switch component, since it goes down the list to find a path that is satisfied by the url.
If you navigate to localhost:3000/practice-areas/123 and the PracticeAreasLandingPage Route comes before PracticeArea, you still satisfy the necessary condition for PracticeAreasLandingPage which is just "practice-areas" so Switch ends up rendering that first. And since you are already on that route to begin with, it gives the appearance that nothing was updated.
Swapping the position of the two Routes would resolve this because now you're telling Switch to go down the list and check whether the url, localhost:3000/practice-areas/123 satisfies the path for PracticeArea "/practice-areas/:practiceAreasItem" first.