如何使用 history.push 传递道具

Question

我有 2 页：betslip.jsx 和receipt.jsx。

当在 betslip.jsx 中单击按钮时，我将用户重定向到收据.jsx，使用以下代码为 2 个道具赋值：

history.push({
    state: { authorized:true, total:10},
    pathname: '/receipt'
})
        

根据我的阅读，这应该有效，但收据中永远不会收到道具值，因为收据看起来像这样：

export default function Receipt({authorized, total}) {

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

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

Authorized 仍为 false，总数仍为 0（它们的初始值）。

我在这里遗漏了一些明显的东西吗？ 请建议

Answer 1

在你的组件中试试这个

const location = useLocation();
const {authorized, total} = location.state;

收据组件

export default function Receipt(props) {
    const location = useLocation();

    const {authorized, total} = location.state;
    console.log('authorized: ', authorized);
    console.log('total: ', total);

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

Answer 2

答案是在您要定向到的页面内执行此操作：

const location = useLocation();
if(location.state){
    authorized = location.state.authorized;
    total = location.state.total;
} else{
    if(!authorized){
        return <Redirect to="/" />;
    }
}