重定向后如何获取RTK Query mutation请求的响应数据？

问题场景 #

我正在搭建应用的新用户注册与邮箱验证功能：

• 注册请求用RTK Query的mutation实现，服务器返回用户姓名、邮箱、ID等数据
• 在SignUpPage组件中，通过useSignUpMutation()的data属性能正常拿到返回数据
• 请求成功后用<Navigate />跳转到SendConfirmation组件展示验证提示，但在这个组件里调用useSignUpMutation()拿到的data是undefined

不想为这个简单操作额外创建Redux slice增加复杂度，也不想把验证页面改成弹窗，想知道有没有办法在跳转后的页面获取到之前mutation的响应数据，猜测重定向后RTK不再将上次响应视为有效缓存。

原因分析 #

RTK Query的mutation响应默认不会持久化缓存：

• 每个组件调用useSignUpMutation()都会创建独立的hook实例，新组件的实例无法共享前一个组件的mutation响应
• Mutation的响应数据不会自动存入全局缓存（除非配置keepUnusedDataFor，但默认时效短，且不适合跨页面传递的场景）

解决方案：通过React Router的导航State传递数据 #

用react-router-dom的navigate方法的state参数传递数据，目标组件通过useLocation Hook获取。

修改后的SignUp组件代码 #

import { useNavigate } from 'react-router-dom';
import { useSignUpMutation } from './auth-service';

export const SignUpPage = () => {
  const [signUp, { data }] = useSignUpMutation();
  const navigate = useNavigate();

  if (data) {
    // 跳转时携带用户数据到state中
    navigate('/confirm-email', { state: { userData: data } });
    return null;
  }

  return (
    <Page>
      <SignUp onSubmit={signUp} />
    </Page>
  );
};

修改后的Verification组件代码 #

import { useLocation } from 'react-router-dom';
import { useResendVerificationMutation } from './auth-service';

export const SendConfirmation = () => {
  const [resendVerification] = useResendVerificationMutation();
  const location = useLocation();
  // 从导航state中取出用户数据
  const userData = location.state?.userData;

  const handleResendVerification = () => {
    // 可以直接使用传递过来的邮箱重发验证邮件
    resendVerification({ email: userData?.email });
  };

  return (
    <Page>
      <Card className={s.modal}>
        <p>请检查您的邮箱 {userData?.email} 完成验证</p>
        <Button type="button" onClick={handleResendVerification}>
          重新发送验证邮件
        </Button>
      </Card>
    </Page>
  );
};

说明 #

这种方式无需额外维护全局状态，适合简单的跨页面数据传递场景，完美避开了RTK Query mutation缓存的限制，同时保持代码简洁。

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