React Router DOM 导航状态传递复杂对象：解决方案与最佳实践

import { useNavigate } from 'react-router-dom';
import { Auth } from 'aws-amplify'; // 假设使用 AWS Amplify 进行认证

function LoginPage() {
    const navigate = useNavigate();
    // ... 其他状态和函数

    async function handleLogin() {
        try {
            const user = await Auth.signIn(userInformation.name!, userInformation.password);
            if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
                // 如果需要重置密码，将用户对象传递到忘记密码页面
                navigate('/auth/forgetPassword', { state: { user: user } });
            } else {
                // 登录成功，将用户对象传递到主页面
                navigate('/main', { state: { user: user } });
            }
        } catch (error) {
            setErrorMessage('凭证错误！');
        }
    }
    // ... JSX 渲染
}

import { useLocation } from 'react-router-dom';

function ForgetPassword() {
    const location = useLocation();
    console.log(location);
    // ... 其他状态和函数
}

import { useNavigate } from 'react-router-dom';
import { Auth } from 'aws-amplify';

function LoginPage() {
    const navigate = useNavigate();
    // ... 其他状态和函数

    async function handleLogin() {
        try {
            const user = await Auth.signIn(userInformation.name!, userInformation.password);
            // 关键：将 user 对象序列化为 JSON 字符串
            const userString = JSON.stringify(user);

            if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
                navigate('/auth/forgetPassword', { state: { user: userString } });
            } else {
                navigate('/main', { state: { user: userString } });
            }
        } catch (error) {
            setErrorMessage('凭证错误！');
        }
    }
    // ... JSX 渲染
}

import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { User } from '../configs/types/Users'; // 假设有 User 类型定义

export default function ForgetPassword() {
    const location = useLocation();
    const [errorMessage, setErrorMessage] = useState<string>('');
    // ... 其他状态

    // 从 location.state 中获取用户字符串，并进行类型断言
    const userString = location.state?.user as string | undefined;
    let userObject: Partial<User> | null = null;

    if (userString) {
        try {
            // 关键：将 JSON 字符串反序列化为对象
            userObject = JSON.parse(userString);
            console.log("成功解析的用户对象:", userObject);
            // 现在可以使用 userObject 进行后续操作
        } catch (error) {
            console.error("从导航状态解析用户数据失败:", error);
            setErrorMessage("获取用户信息失败，请重试。");
        }
    } else {
        console.warn("导航状态中未找到用户数据。");
        // 可以根据需要进行重定向或显示错误信息
    }

    // ... 使用 userObject 进行组件逻辑
    return (
        // ... JSX 渲染
        <div>
            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
            {/* 根据 userObject 渲染内容 */}
        </div>
    );
}