React中使用useNavigate传递数据至下一个组件失败问题排查

错误原因 #

React Router的useNavigate第二个参数是配置对象，自定义数据必须放在state属性下，你直接把results作为顶层字段，组件自然无法读取。

修改跳转组件代码 #

将传递的数据封装到state对象中：

const navigate = useNavigate();

function toResults(){
    navigate('/results', { state: { results: props.results } });
}

修改Result组件代码 #

要获取传递的state数据，需使用React Router提供的useLocation钩子，不能直接从组件props中读取：

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

function Result() {
    const location = useLocation();
    const results = location.state?.results; // 可选链语法避免无数据时抛出错误
    console.log(results);
    
    return (
        <>
            Result
        </>
    )
}

export default Result;

补充说明 #

• 若组件是通过路由配置（如Routes中用element={<Result />}）渲染的，不会自动接收路由相关props，必须通过useLocation/useParams等钩子获取路由数据。
• location.state存储在内存中，页面刷新后数据会丢失。如果需要持久化传递的数据，可考虑使用URL参数、localStorage或状态管理工具。

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