ReactJS使用Redirect跳转feedback路由后对应组件未刷新问题求解

问题根因 #

跳转后feedback组件未刷新的核心原因有两个：

1. 组件挂载时拉取数据的useEffect仅依赖dispatch，dispatch作为稳定引用不会触发重执行，若组件此前已挂载过，跳转回来时不会重新拉取最新的反馈数据
2. 监听redux数据的useEffect依赖整个props对象，依赖粒度太粗可能导致更新不及时

解决步骤 #

方案1：添加路由位置监听（推荐） #

在feedback组件中引入路由位置监听，每次路由跳转进入该页面时自动触发数据拉取：

1. 先导入useLocation钩子：

import { Link, Route, useRouteMatch, useLocation } from 'react-router-dom';

2. 修改组件内的依赖配置：

const FeedbackComponent = (props) => {
  const [reviews, setReviews] = useState([]);
  const [message, setMessage] = useState('');
  const dispatch = useDispatch();
  const { url } = useRouteMatch();
  const location = useLocation(); // 新增获取路由位置实例

  // 修改依赖项，加入location保证路由跳转时重新拉取数据
  useEffect(() => {
    dispatch(reviewsAction({
      role: getCookie('role'),
      userID: getCookie('userID'),
    }))
  }, [dispatch, location]);

  // 把依赖从整个props改成精准的props.getReviews，避免不必要的更新
  useEffect(() => {
    if (props.getReviews.hasOwnProperty('response') && props.getReviews.response !== undefined) {
      if (Array.isArray(props.getReviews.response)) {
        setReviews(props.getReviews.response);
      } else {
        setMessage(props.getReviews.response.message);
      }
    }
  }, [props.getReviews]);

  // 其余原有代码保持不变
}

方案2：跳转加随机参数（兜底方案） #

如果上述方案不生效，可在Redirect跳转时添加随机查询参数强制触发组件更新，修改SampleComponent的Redirect代码：

if(redirect) {
  return <Redirect to={`/feedback?t=${Date.now()}`} />
}

每次跳转的url都带有不同的时间戳参数，会强制触发组件的effect执行。

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