React中通过history.push传递的参数无法被目标组件接收怎么办

你通过history.push的state字段传递的参数，不会直接作为组件的顶层props传入，因此直接在Receipt组件的入参中解构authorized和total无法获取到路由传递的值，你当前打印的初始值是参数未匹配时的默认值。

根据你使用的React Router版本选择对应实现：

React Router v5 实现 #

方法1：使用useLocation钩子（推荐，函数组件通用） #

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

export default function Receipt() {
    const location = useLocation();
    // 加可选链和默认值，避免刷新/直接访问页面时state为空报错
    const authorized = location.state?.authorized ?? false;
    const total = location.state?.total ?? 0;

    console.log('authorized: ', authorized);
    console.log('total: ', total);

    if(!authorized){
        return <Redirect to="/" />;
    }
    return (
        <div>
            <h1>hello</h1>
        </div>
    )
}

方法2：从Route注入的props中读取 #

如果你的路由规则是通过<Route path="/receipt" component={Receipt} />的方式定义的，React Router会自动给Receipt组件注入路由相关props，直接解构即可：

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

export default function Receipt({ location }) {
    const authorized = location.state?.authorized ?? false;
    const total = location.state?.total ?? 0;
    // 剩余逻辑和上面一致
}

React Router v6 实现 #

v6版本移除了Redirect组件，替换为Navigate，同样通过useLocation获取state：

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

export default function Receipt() {
    const location = useLocation();
    const authorized = location.state?.authorized ?? false;
    const total = location.state?.total ?? 0;

    console.log('authorized: ', authorized);
    console.log('total: ', total);

    if(!authorized){
        return <Navigate to="/" replace />;
    }
    return (
        <div>
            <h1>hello</h1>
        </div>
    )
}

注意：路由state存储在浏览器会话历史中，用户刷新页面或者直接手动输入receipt页面地址访问时，state会丢失，建议添加默认值兜底，重要参数可以配合全局状态管理（Context、Redux等）存储。

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