路由变更未触发Axios请求刷新数据问题求助

我来帮你拆解并解决这个问题——核心问题有两个：一是重复点击同一路由Link时路由无变化，二是路由参数变更时组件没有自动触发数据刷新。下面是具体的解决方案：

1. 监听路由参数变化，触发数据刷新 #

你的FilterCategory组件已经通过withRouter和connect拿到了路由参数，但类组件在路由参数变化时不会重新挂载，只会执行更新逻辑——这意味着componentDidMount里的请求只会在首次加载时执行一次。你需要添加componentDidUpdate生命周期来监听参数变化，触发重新请求：

class FilterCategory extends Component {
  componentDidMount() {
    // 首次加载时请求数据
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    // 对比前后路由的分类ID和页码，有变化就重新请求
    const { id: prevCatId, p: prevPage } = prevProps.match.params;
    const { id: currentCatId, p: currentPage } = this.props.match.params;

    if (prevCatId !== currentCatId || prevPage !== currentPage) {
      this.fetchData();
    }
  }

  fetchData() {
    const { id, p } = this.props.match.params;
    this.props.fetchSpecificCats(id, p);
    this.props.fetchBlogCatPagination(id, p);
  }

  // ... 组件其他渲染逻辑
}

// 你的connect和withRouter包裹顺序是正确的，无需调整
export default withRouter(connect(mapStateToProps, {fetchSpecificCats, fetchBlogCatPagination})(FilterCategory));

2. 处理重复点击同一路由Link无响应的问题 #

React Router默认不会对完全相同的路由跳转做任何处理——如果你当前已经在/blog/categories/1/page=1，再点击同一个分类的Link，路由不会变化，componentDidUpdate也不会触发。如果需要这种场景下也刷新数据，可以给Link添加点击事件，手动触发请求：

<Link 
  to={`/blog/categories/${cat.id}/page=1`}
  onClick={() => {
    // 直接调用请求action，强制刷新数据
    this.props.fetchSpecificCats(cat.id, 1);
    this.props.fetchBlogCatPagination(cat.id, 1);
  }}
>
  <span className="fs-11 text-muted float-left"></span>{cat.title}
</Link>

3. 额外检查点 #

• 确认你的fetchSpecificCats和fetchBlogCatPagination action creators正确发起了Axios请求，并且在请求成功后更新了Redux store——如果store没有更新，组件也不会重新渲染。
• 你的路由配置顺序是合理的，Switch里NotFound放在最后不会干扰其他路由的匹配。

内容的提问来源于stack exchange，提问作者Eric Valijani