ReactRouter传参为空的解决方法

在使用React Router DOM的`navigate`进行页面跳转时，你是否遇到过通过`state`传递对象却在目标组件中获取到`null`的情况？本文将深入探讨这一问题，并提供一个简单有效的解决方案。通过JSON序列化和反序列化，确保复杂对象数据在路由跳转过程中能够正确传递。文章将详细介绍如何在源组件中将对象序列化为JSON字符串，并在目标组件中将其反序列化为原始对象，附带示例代码和注意事项，助你轻松解决React Router导航传值难题，提升Web应用的稳定性和用户体验。

本教程旨在解决React Router DOM中使用`navigate`传递复杂对象数据时，目标组件通过`useLocation().state`获取到`null`的问题。文章将详细解释该现象，并提供一种通过JSON序列化和反序列化来确保数据正确传递的实用解决方案，附带示例代码和注意事项。

引言

在React应用程序中，利用react-router-dom库进行页面导航是常见的操作。navigate函数提供了一个强大的功能，即通过state选项在不同路由之间传递数据。这对于实现用户认证后的重定向、预填充表单数据或传递临时状态等场景至关重要。然而，开发者有时会遇到一个令人困惑的问题：当尝试通过state传递一个复杂的JavaScript对象时，目标组件却无法正确接收到数据，useLocation().state返回null。

问题现象：useLocation().state为空

假设我们有一个登录页面，在用户成功认证后，需要根据认证结果（例如，是否需要重置密码）将用户对象传递到下一个路由。我们可能会使用如下代码：

// 源组件 (例如 Login.tsx)
import { Auth } from 'aws-amplify';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { User } from '../configs/types/Users'; // 假设User类型定义

export default function Login() {
    const navigate = useNavigate();
    const { t } = useTranslation();
    const [errorMessage, setErrorMessage] = useState<string>('');
    const [userInformation, setUserInformation] = useState<Partial<User>>({
        name: '',
        password: '',
    });

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

    // ... 其他UI和逻辑
    return (
        <div>
            {/* 登录表单和按钮 */}
            <button onClick={handleLogin}>登录</button>
            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
        </div>
    );
}

在目标组件（例如ForgetPassword.tsx）中，我们使用useLocation钩子来获取传递过来的状态：

// 目标组件 (例如 ForgetPassword.tsx)
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { User } from '../configs/types/Users'; // 假设User类型定义

export default function ForgetPassword() {
    const location = useLocation();
    const [currentUser, setCurrentUser] = useState<User | null>(null);

    console.log(location); // 打印location对象

    useEffect(() => {
        // 尝试从location.state中获取用户数据
        if (location.state && location.state.user) {
            // ... 处理用户数据
            console.log('获取到的用户数据:', location.state.user);
        } else {
            console.warn('未获取到用户数据或数据为空');
        }
    }, [location.state]);

    // ... 组件的其他逻辑
    return (
        <div>
            {/* 忘记密码表单 */}
        </div>
    );
}

然而，当我们在ForgetPassword组件中打印location对象时，可能会得到如下结果：

{
  "pathname": "/auth/forgetPassword",
  "search": "",
  "hash": "",
  "state": null, // 问题所在：state为null
  "key": "default"
}

state属性意外地显示为null，这意味着我们尝试传递的user对象并未成功到达目标组件。

问题根源与解决方案：数据序列化

尽管react-router-dom底层利用浏览器history API的pushState方法，该方法理论上支持传递JavaScript对象作为状态。但在某些特定场景、React版本、react-router-dom版本组合或当传递的对象包含特定复杂结构（例如，某些非纯JavaScript对象、包含循环引用、或不可序列化的属性）时，直接传递复杂对象可能会导致内部序列化失败，从而使得state最终变为null。

解决这个问题的关键在于显式地对要传递的复杂数据进行序列化和反序列化。最常用且可靠的方法是使用JSON格式。

1. 序列化 (Serialization)：在源组件中，将JavaScript对象转换为JSON字符串。
2. 反序列化 (Deserialization)：在目标组件中，将接收到的JSON字符串转换回JavaScript对象。

实现步骤与代码示例

步骤一：在源组件中序列化数据

修改Login.tsx中的handleLogin函数，使用JSON.stringify()将user对象转换为JSON字符串，然后再将其作为state的值传递。

// 源组件 (例如 Login.tsx) - 优化后
import { Auth } from 'aws-amplify';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { User } from '../configs/types/Users'; // 假设User类型定义

export default function Login() {
    const navigate = useNavigate();
    const { t } = useTranslation();
    const [errorMessage, setErrorMessage] = useState<string>('');
    const [userInformation, setUserInformation] = useState<Partial<User>>({
        name: '',
        password: '',
    });

    async function handleLogin() {
        try {
            const user = await Auth.signIn(userInformation.name!, userInformation.password);
            if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
                // 将user对象序列化为JSON字符串
                navigate('/auth/forgetPassword', { state: { user: JSON.stringify(user) } });
            } else {               
                navigate('/main', { state: { user: JSON.stringify(user) } });
            }
        } catch (error) {
            setErrorMessage(t('Wrong credentials!'));
        }
    }

    // ... 其他UI和逻辑
    return (
        <div>
            {/* 登录表单和按钮 */}
            <button onClick={handleLogin}>登录</button>
            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
        </div>
    );
}

步骤二：在目标组件中反序列化数据

在ForgetPassword.tsx中，从location.state获取到JSON字符串后，使用JSON.parse()将其转换回原始的JavaScript对象。务必添加错误处理，以防解析失败。

// 目标组件 (例如 ForgetPassword.tsx) - 优化后
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { User } from '../configs/types/Users'; // 假设User类型定义

export default function ForgetPassword() {
    const location = useLocation();
    const [currentUser, setCurrentUser] = useState<User | null>(null);

    useEffect(() => {
        // 检查location.state是否存在，并且user属性是一个字符串
        if (location.state && typeof location.state.user === 'string') {
            try {
                // 反序列化JSON字符串为User对象
                const parsedUser: User = JSON.parse(location.state.user);
                setCurrentUser(parsedUser);
                console.log('成功获取并解析用户数据:', parsedUser);
            } catch (error) {
                console.error('解析用户数据失败:', error);
                // 处理解析失败的情况，例如重定向到错误页面或显示提示信息
            }
        } else {
            console.warn('location.state.user 不存在或不是字符串类型，无法解析用户数据。');
            // 处理无数据或数据类型不匹配的情况，例如重定向到登录页
        }
    }, [location.state]); // 依赖location.state，当其变化时重新执行

    // ... 组件的其他逻辑，现在可以使用 currentUser 状态
    return (
        <div>
            {currentUser ? (
                <p>欢迎, {currentUser.givenName || '用户'}! 请设置您的新密码。</p>
            ) : (
                <p>未获取到用户数据，请重新登录。</p>
            )}
            {/* 忘记密码表单 */}
        </div>
    );
}

通过上述修改，user对象现在可以作为JSON字符串成功传递，并在目标组件中被正确解析和使用。

注意事项与最佳实践

1. 数据类型兼容性：JSON.stringify()并非万能。它无法序列化函数、Symbol、undefined等特殊JavaScript值。确保你传递的对象只包含可序列化的数据类型（字符串、数字、布尔值、null、数组、普通对象）。如果对象包含不可序列化的部分，这些部分在序列化后可能会丢失或被转换为null。
2. 错误处理：在JSON.parse()时务必使用try-catch块。如果接收到的字符串不是有效的JSON格式，JSON.parse()会抛出错误，导致应用崩溃。健壮的错误处理是关键。
3. 安全性：尽管state数据通常不直接显示在URL中，但它会存储在浏览器的会话历史记录中。因此，避免在state中传递高度敏感的信息（如未加密的密码、API密钥等）。对于这类数据，应考虑使用服务器端会话管理、Token机制或更安全的全局状态管理方案。
4. 数据量限制：state数据存储在浏览器内存中，虽然通常足够用于小到中等大小的数据，但传递超大型数据对象可能影响性能或遇到浏览器限制。对于大量数据，更推荐使用API请求或全局状态管理。
5. 替代方案：对于更复杂或需要持久化的状态管理需求，可以考虑以下替代方案：
   • URL查询参数 (useSearchParams)：适用于传递简单、公开且少量的数据，数据会显示在URL中。
   • React Context API：适用于在组件树中共享状态，避免props drilling。
   • Redux, Zustand, Recoil等全局状态管理库：适用于管理应用级别的复杂状态，提供更强大的数据流控制和调试工具。

总结

当在react-router-dom中使用navigate的state选项传递复杂对象时遇到null值的问题，最可靠的解决方案是采用JSON序列化和反序列化。在源组件中将对象转换为JSON字符串，然后在目标组件中将其解析回原始对象。这种方法确保了数据传递的稳定性和兼容性，同时配合适当的错误处理和安全考量，可以构建出更加健壮的React应用程序。

今天关于《ReactRouter传参为空的解决方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！