解决React Router state传递复杂对象时返回null的问题

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

// ... 其他导入和组件定义

export default function LoginPage() {
    const navigate = useNavigate();
    // ... state定义，如userInformation, errorMessage等

    async function handleLogin() {
        try {
            const user = await Auth.signIn(userInformation.name!, userInformation.password);
            if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
                // 尝试将user对象直接作为state传递
                navigate('/auth/forgetPassword', { state: { user: user } });
            } else {               
                navigate('/main', { state: { user: user } });
            }
        } catch (error) {
            setErrorMessage('Wrong credentials!');
        }
    }

    // ... 其他渲染逻辑
}

import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

// ... 其他导入和组件定义

export default function ForgetPassword() {
    const location = useLocation();
    const [userData, setUserData] = useState<any>(null);

    useEffect(() => {
        // 打印location对象，发现state为null
        console.log('Location object:', location); 
        if (location.state && (location.state as any).user) {
            setUserData((location.state as any).user);
        }
    }, [location]);

    // ... 其他渲染和逻辑
}

{
 pathname: '/auth/forgetPassword',
 search: '',
 hash: '',
 state: null, // 期望获取到的user对象却为null
 key: 'default'
}

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

export default 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('Wrong credentials!');
        }
    }
    // ...
}

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

export default function ForgetPassword() {
    const location = useLocation();
    const [userData, setUserData] = useState<User | null>(null);
    const [parseError, setParseError] = useState<string | null>(null);

    useEffect(() => {
        if (location.state && (location.state as any).user) {
            const userString = (location.state as any).user;
            try {
                // 核心改变：将JSON字符串反序列化为对象
                const parsedUser: User = JSON.parse(userString);
                setUserData(parsedUser);
            } catch (error) {
                console.error("Failed to parse user data from state:", error);
                setParseError("Failed to load user data. Please try again.");
            }
        } else {
            console.warn("No user data found in location state.");
            // 处理没有数据的场景，例如重定向回登录页
        }
    }, [location]);

    if (parseError) {
        return <p style={{ color: 'red' }}>{parseError}</p>;
    }

    if (!userData) {
        return <p>Loading user data or no data available...</p>;
    }

    return (
        <div>
            <h2>Forget Password for {userData.name || userData.givenName}</h2>
            {/* 使用userData进行后续操作 */}
        </div>
    );
}