react-router Link跳转路由先于Redux状态更新如何解决？

核心问题根源 #

点击Link跳转时，React Router会立即初始化A页面组件，此时B页面的componentWillUnmount还在执行流程中——即便Redux action同步更新了状态，A页面的初始props已经基于旧状态生成，因此会先渲染旧内容，待状态更新后触发二次重渲染。

最简便的两种解决方案 #

1. 提前触发状态更新（推荐）

放弃在componentWillUnmount中触发action，改为在点击Link时直接执行状态更新，确保跳转前状态已完成更新，A页面挂载时直接拿到最新props。

• 函数组件示例：

  import { useDispatch, useNavigate } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { updateAStateAction } from './your-redux-actions';
  
  const BPage = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
  
    const handleJumpToA = (e) => {
      e.preventDefault(); // 阻止Link默认跳转行为
      dispatch(updateAStateAction(/* 传入需要更新的状态数据 */));
      navigate('/a'); // 状态更新后再执行跳转
    };
  
    return <Link to="/a" onClick={handleJumpToA}>跳转到A页面</Link>;
  };
  

• 类组件示例：

  import { Link } from 'react-router-dom';
  import { updateAStateAction } from './your-redux-actions';
  import { connect } from 'react-redux';
  
  class BPage extends React.Component {
    handleJumpToA = (e) => {
      e.preventDefault();
      this.props.dispatch(updateAStateAction(/* 传入需要更新的状态数据 */));
      this.props.history.push('/a');
    };
  
    render() {
      return <Link to="/a" onClick={this.handleJumpToA}>跳转到A页面</Link>;
    }
  }
  
  export default connect()(BPage);
  

2. 利用React Router v6+的Loader机制（适合路由级别的预处理）

如果使用React Router v6及以上版本，可以给A页面的路由配置loader函数，在路由加载A页面之前完成状态更新，确保组件挂载时状态已就绪。

import { createBrowserRouter } from 'react-router-dom';
import APage from './APage';
import store from './your-redux-store';
import { updateAStateAction } from './your-redux-actions';

const router = createBrowserRouter([
  {
    path: '/a',
    element: <APage />,
    loader: ({ location }) => {
      // 从跳转携带的state中获取数据（B页面Link需传递state）
      const { data } = location.state || {};
      store.dispatch(updateAStateAction(data));
      return null;
    },
  },
  // 其他路由配置
]);

对应的B页面Link需传递状态：

<Link to="/a" state={{ data: /* 需要传递的状态数据 */ }}>跳转到A页面</Link>

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