React使用Link跳转同页面不同参数时页面不刷新数据不更新如何解决

问题原因 #

React Router 对匹配到同一个路由组件的场景默认会复用组件实例，不会触发组件的卸载和重新挂载。你代码中拉取新闻详情的useEffect使用了空依赖数组，只会在组件第一次挂载时执行1次，后续路由参数id变化时不会重新触发接口请求，因此页面数据不会更新。

解决方案 #

修改拉取新闻详情的useEffect的依赖数组，将id加入依赖即可，只要路由参数id发生变化，就会自动重新执行接口请求拉取对应新的新闻数据：

// 只需要修改这个useEffect的依赖，其他代码不需要动
useEffect(() => {
  async function fetchMyAPI() {
    let news = await onGetNewsById(id);
    setNewsDetail(news);
  }
  fetchMyAPI();
}, [id]); // 把原来的空数组改成[id]

可选补充方案 #

如果你需要让整个组件在参数变化时强制重新挂载（比如要重置所有内部状态），可以在路由定义处给NewDetails组件绑定和id关联的key：

// 路由配置示例
<Route 
  path="/NewDetails/:id" 
  element={<NewDetails key={window.location.pathname} />} 
/>

这个方案会让id变化时组件完全重渲染，所有state都会重置，你可以根据自己的业务需求选择。

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