补充工具栏中的React Links仅在第一次单击时起作用

Question

也许我在这里遗漏了一些明显的东西，但是我有一个Sidebar组件，可在我的应用的2页上使用； Blog和Post。在补充工具栏组件中，我有一个调度程序来获取“固定文章”的一些数据，在我的App中，我有一些路由。当我单击侧边栏中的链接时，该链接有效，但如果单击侧边栏中的其他链接，则不会发生任何事情。在我的redux存储中，我启用了日志记录中间件，并且看到链接的第一次单击是SUCCESS，但是单击侧边栏中的第二个链接则只显示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;
      }
    }