Реактивные ссылки в боковой панели работают только при первом нажатии

Question

Возможно, я упускаю что-то очевидное здесь, но у меня есть компонент Sidebar, который используется на 2 страницах моего приложения;Blog и Post.В моем компоненте боковой панели у меня есть диспетчеризация для извлечения некоторых данных для «закрепленных статей», а в моем App есть несколько маршрутов.Когда я нажимаю на ссылку на боковой панели, ссылка работает, но если я нажимаю другую ссылку на боковой панели, ничего не происходит.В моем магазине редуксов я включил промежуточное программное обеспечение для ведения журналов, и я вижу, что первый щелчок по ссылке - УСПЕХ, но нажатие на вторую ссылку на боковой панели показывает только CLEAR.Любые предложения?

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