React Router导航时state传值为null问题求助（React 18.2）

问题分析 #

你在使用react-router-dom跳转时传递user对象到忘记密码页面，但location.state始终为null，核心原因大概率是AWS Amplify返回的user对象包含不可序列化的属性（比如函数、Symbol类型或循环引用），而React Router的state要求必须是可JSON序列化的数据，不可序列化的内容会被过滤，最终导致state变为null。

解决方案 #

1. 只传递可序列化的用户数据 #

不要直接传递整个Amplify user对象，而是提取需要的可序列化字段（比如用户名、用户ID等）：

修改登录页的handleLogin函数：

async function handleLogin() {
  Auth.signIn(userInformation.name!, userInformation.password)
    .then((user) => {
      if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
        // 提取可序列化的字段，避免传递整个user对象
        const userData = {
          username: user.username,
          sub: user.attributes.sub,
          session: user.signInUserSession // 确认该字段可序列化后再传递
        };
        navigate('/auth/forgetPassword', { state: { user: userData } });
      } else {               
        navigate('/main', { state: { user: userData } });
      }
    })
    .catch((_) => {
      setErrorMessage(t('Wrong credentials!'));
    });
}

2. 验证路由上下文一致性 #

确保ForgetPassword组件和登录页处于同一个Router上下文（比如都被BrowserRouter包裹）：

// 根组件示例
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './path/to/Login';
import ForgetPassword from './path/to/ForgetPassword';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/auth/login" element={<Login />} />
        <Route path="/auth/forgetPassword" element={<ForgetPassword />} />
      </Routes>
    </BrowserRouter>
  );
}

3. 避免页面刷新导致state丢失 #

location.state存储在浏览器的内存历史栈中，页面刷新后会丢失。如果业务需要持久化数据，可以：

• 用localStorage临时存储必要的用户敏感信息（注意加密处理）
• 在ForgetPassword组件中调用Auth.currentAuthenticatedUser()重新获取用户信息

验证修改 #

修改后在ForgetPassword组件中重新打印location.state，应该能看到你传递的可序列化用户数据：

console.log(location.state); // 输出示例：{ user: { username: "xxx", sub: "xxx" } }

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