React Links in Sidebar work only on first click - reactjs

Question

Maybe I am missing something obvious here but I have a Sidebar component that is used on 2 pages of my app; Blog and Post. In my Sidebar component I have a dispatch to fetch some data for "pinned articles" and in my App I have some routes. When I click on the link in the sidebar, the link works but if I click a different link in the sidebar, nothing happens. In my redux store I have enabled logging middleware and I see the first click on the link is SUCCESS but clicking a second link in the sidebar shows nothing but CLEAR. Any suggestions?
App.jsx
[... unrelated code omitted ...]
render() {
const { alert } = this.props;
return (
<div>
{alert.message &&
<div className={`alert ${alert.type}`}>{alert.message}</div>
}
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={HomePage} />
<PrivateRoute exact path="/resource-centre" component={Blog} />
<PrivateRoute path="/resource-centre/:id" component={Post} />
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
</div>
</Router>
</div>
);
}
Sidebar.jsx
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { articleActions } from '../../actions';
import _ from 'lodash';
class Sidebar extends React.Component {
componentDidMount() {
this.props.dispatch(articleActions.fetchPinnedArticles());
}
render() {
const { pinnedArticles } = this.props;
return (
<div>
<h2 className="widget-title">Pinned</h2>
<ul>
{pinnedArticles.items && pinnedArticles.items.map(article =>
<li className="tag-cloud-link" key={article.id}>
<Link to={{ pathname: `/blog/${article.id}` }}>{article.title}</Link>
</li>
)}
</ul>
</div>
)
}
}
function mapStateToProps(state) {
const { pinnedArticles } = state;
return {
pinnedArticles
}
}
const connectedSidebar = connect(mapStateToProps)(Sidebar);
export { connectedSidebar as Sidebar };
articleAction.js
function fetchPinnedArticles() {
return dispatch => {
dispatch(request());
articleService.fetchPinnedArticles()
.then(
pinnedArticles => dispatch(success(pinnedArticles)),
error => dispatch(failure(error))
);
};
function request() {
return { type: articleConstants.FETCH_PINNED_REQUEST }
}
function success(pinnedArticles) {
return { type: articleConstants.FETCH_PINNED_SUCCESS, pinnedArticles }
}
function failure(error) {
return { type: articleConstants.FETCH_PINNED_FAILURE, error }
}
}
articleService.js
function fetchPinnedArticles() {
const requestOptions = {
method: 'GET',
headers: authHeader()
};
return fetch(`${config.apiUrl}/articles/pinned`, requestOptions).then(handleResponse, handleError);
}
articleReducer.js
export function pinnedArticles(state = {}, action) {
switch (action.type) {
case articleConstants.FETCH_PINNED_REQUEST:
return {
loading: true
}
case articleConstants.FETCH_PINNED_SUCCESS:
return {
items: action.pinnedArticles
};
case articleConstants.FETCH_PINNED_FAILURE:
return {
error: action.error
};
default:
return state;
}
}