React 如何监听路由变化重新渲染组件

最新推荐文章于 2025-07-12 01:26:29 发布

转载最新推荐文章于 2025-07-12 01:26:29 发布 · 8.4k 阅读

react 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一个React组件如何根据路由变化来加载数据的方法。通过在组件挂载和路由更新时调用数据获取函数，确保每次路由变化都能展示最新的数据内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

那我们所需要做的只是：当路由改变时，根据路由，也去请求一下数据就OK了，于是乎:

class NewsList extends Component {
  componentDidMount () {
     this.fetchData(this.props.location);
  }
  
  fetchData(location) {
    const type = location.pathname.replace('/', '') || 'top'
    this.props.dispatch(fetchListData(type))
  }

  componentWillReceiveProps(nextProps) {
     if (nextProps.location.pathname != this.props.location.pathname) {
         this.fetchData(nextProps.location);
     } 
  }

  render () {
    ...
  }
}