React-router-bootstrap的LinkContainer跳转URL但页面不重新渲染问题咨询

该问题属于React Router同路由参数变化场景的典型组件复用问题：你的/item/:id路由对应的页面组件，在仅路由参数id发生变化时，React会复用已存在的组件实例，不会触发组件重新挂载，因此写在组件挂载阶段的数据拉取逻辑不会自动执行，最终表现为URL更新但页面内容不变。手动刷新页面时整个应用重载，组件会重新走挂载流程拉取新id对应的数据，所以内容会恢复正常。

• 路由参数监听缺失
  绝大多数情况下是你写的数据拉取逻辑没有监听路由参数id的变化：
  • 函数组件场景：如果拉取数据的useEffect只配置了空依赖数组[]，只会在组件第一次挂载时执行，需要把id参数加入依赖数组，示例如下：

    import { useParams } from 'react-router-dom'
    import { useState, useEffect } from 'react'
    
    const ItemPage = () => {
      const { id } = useParams()
      const [itemDetail, setItemDetail] = useState(null)
    
      useEffect(() => {
        // 拉取对应id的商品数据
        fetch(`/api/getItem/${id}`)
          .then(res => res.json())
          .then(data => setItemDetail(data))
      }, [id]) // id变化时自动重新执行拉取逻辑
    }
    

  • 类组件场景：需要在componentDidUpdate生命周期中比对前后id的变化，id发生变化时重新拉取数据：

    class ItemPage extends React.Component {
      componentDidMount() {
        // 首次挂载拉取数据
        this.fetchItem(this.props.match.params.id)
      }
    
      componentDidUpdate(prevProps) {
        // 比对前后id，发生变化时重新拉取
        if (this.props.match.params.id !== prevProps.match.params.id) {
          this.fetchItem(this.props.match.params.id)
        }
      }
    
      fetchItem = (id) => {
        // 数据拉取逻辑
      }
    }
    

• 依赖包版本不兼容
  如果你使用的是react-router-bootstrap提供的LinkContainer，需要确认版本和项目内的react-router版本匹配：react-router-bootstrap@0.26.x对应react-router@6，react-router-bootstrap@0.25.x对应react-router@5，版本不匹配时也会出现路由更新但组件状态不刷新的问题。
• 不必要的渲染拦截导致
  如果你的页面组件被React.memo包裹，默认的浅比较可能无法检测到路由参数的深层变化，导致组件被阻止重渲染，可以删除不必要的React.memo封装，或者给React.memo传入自定义比较函数处理路由参数变化的场景。

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